RxJS Observable.fromEvent数据

Question

如何将事件数据附加到Observable.fromEvent

在我的示例中，我有以下对象数组

var people = [
    { name: "Bert", img: "" },
    { name: "Enrie", img: "" },
    { name: "Elmo", img: "" }
];

我想用一个clickStream创建一个data.src，如下所示：

clickStream = Rx.Observable.fromEvent(li, 'click', { src :  people[p].img });

然后订阅：

clickStream.subscribe(function(event) {
    $('#img')[0].src = event.data.src;
});

方法

编辑

我创建了一个我的例子中的JsFiddle，注意，在控制台日志中，事件有一个未定义的data对象--我如何分配它？

注意:我使用的不是事件发射器，而是本机DOM事件。

Answer 1

我不确定我是否正确地理解了您的用例，但是如果您想向侦听器传递的事件对象添加一些内容，那么只需使用map：

clickStream = Rx.Observable.fromEvent(li, 'click').map(function (event){
  return {
    event : event,
    data : { src :  people[p].img }
  }
});

这尤其比在事件中直接插入data属性要好。event应该是不可变的。

或者您可以使用选择器重载(用于测试，从未实际使用该选择器函数)：

clickStream = Rx.Observable.fromEvent(li, 'click', function (event){
  return {
    event : event,
    data : { src :  people[p].img }
  }
});

Answer 2

你离我很近。

引用fromEvent方法的API文档，第三个参数应该是一个可以接受参数并返回单个对象的函数。

所以你必须做：

Rx.Observable.fromEvent(li, 'click', _ => { return { src: elm.img } })

然后，当您订阅它时，您将得到一个具有src属性的对象。

此外，我还更新了您的代码，使其以函数式的方式实现。

  const people = [
        { name: "Bert", img: "http://vignette1.wikia.nocookie.net/muppet/images/e/e1/Bert_smile.png/revision/latest?cb=20110630173259" },
        { name: "Enrie", img: "http://vignette1.wikia.nocookie.net/muppet/images/4/41/Ernie-RubberDuckie.jpg/revision/latest?cb=20110423180533" },
        { name: "Elmo", img: "https://upload.wikimedia.org/wikipedia/en/7/74/Elmo_from_Sesame_Street.gif" }
    ];



  const ul = $('#list');

  const clickStream  = people.map((elm) => {
    const li = $('<li />');
    li.html(elm.name);
    li.data('src', elm.img);
    ul.append(li);
    return Rx.Observable.fromEvent(li, 'click', _ => { return { src: elm.img } })
  }).reduce((a, b) => Rx.Observable.merge(a, b), Rx.Observable.empty())

  clickStream.subscribe(e => console.log(e))

请随时检查更新后的JsFiddle