RxJS Observable.fromEvent數據

如何將事件數據附加到Observable.fromEvent？RxJS Observable.fromEvent數據

在我的例子，我有以下對象數組

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

我想創建一個點擊流與data.src類似：

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事件

來源

2016-08-18 Luke T O' Brien

到fromEvent的第三個參數，就是要選擇功能 - 如果你使用類似function（）{return {src：people [p] .img}}的東西呢？ –

啊，好的謝謝，文件不是很清楚。但是現在用數據對象代替了整個事件，我想保留這個事件並將數據附加到事件 –

我不知道如果我正確理解你的使用情況，但如果你想添加一些由聽者傳遞的事件對象，然後就去做了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 } 
    } 
});

來源

2016-08-18 15:08:22 user3743222

我接受了這個答案，我選擇了第二個使用'fromEvent'選擇器函數的例子 - 我認爲官方文檔應該包括一個使用本地事件的例子，他們唯一的例子是使用「EventEmiter」，這讓我感到困惑我更新了我的JSFiddle https://jsfiddle.net/0gcckozp/1/ –

你是八九不離十。

指的是from事件方法的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

來源

2016-08-18 16:10:42

'reduce'是不需要，只需使用'flatMap'而不是'map' – paulpdaniels

'people'是一個JavaScript數組而不是Observable，它沒有'flatMap'功能 –

我給了這個功能風格的投票權，但我想保留'事件'對象不能用新的替換它 –

RxJS Observable.fromEvent數據

回答

相關問題