Question

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

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

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

我想创建一个带有data.src的clickStream，例如：

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

然后订阅它：

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

API documentation for fromEvent method

修改

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

注意：我没有使用事件发射器，而是使用本机DOM事件

Answer 1

你非常接近。

参考 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

Answer 2

我不确定我是否理解你的用例，但是如果你想在监听器传递的事件对象中添加一些东西，那么只需用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 }
  }
});

RxJS Observable.fromEvent数据

2 个答案: