RxJS Observable.fromEvent数据

时间:2016-08-18 14:03:41

标签: javascript events rxjs

如何将事件数据附加到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事件

2 个答案:

答案 0 :(得分:3)

你非常接近。

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

答案 1 :(得分: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 }
  }
});