如何将事件数据附加到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事件
答案 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 }
}
});