如何將Rx.Observable.fromEvent添加到ajax內容

Question

我有一些使用Ajax獲取的內容，它是一個json對象。該對象顯示在瀏覽器中

var stateSubjectSub = stateSubject.subscribe(function(data) { 
console.log('state changes'); 
console.log(data); 

var list = document.querySelector('#state .mdl-list'); 
if (list) { 
    document.getElementById('state').removeChild(list); 
} 

if (data.objectives && data.objectives.length > 0) { 
    document.getElementById('state').appendChild(h('ul.mdl-list', 
     data.objectives.map(function(item) { 
      return h('li.mdl-list__item.mdl-list__item-three-line', { 
        'data-type': 'objective' 
       }, 
       h('span.mdl-list__item-primary-content', 
        h('span',item.title) 
       ), 
       h('span.mdl-list__item-text-body', 'some stuff goes here'), 
       h('span.mdl-list__item-secondary-content', 
        h('a.mdl-list__item-secondary-action', { 
         href: '#' 
        }, h('i.material-icons.mdl-badge.mdl-badge--overlap', { 
         'data-badge': item.initiatives ? item.initiatives.length : 0 
        }, 'assistant_photo')) 
       ) 
      ); 
     }) 
    )); 
} 
state = data; 

}, function(err) { 
    console.log(err); 
}); 

Ajax被加載，狀態被更新並且DOM被構建。一切都按預期工作。我的問題是，如何將訂閱者添加到document.ready中不存在的內容？我需要將觀察者與將來出現的某些事物聯繫起來。我如何使用RxJS來做到這一點？具體來說，我想可觀察添加到UL - >裏 - >一個元素

我不使用jQuery或類似的東西，我想只有RxJS

堅持

Answer 1

您可以創建一個Observable使用Observable.fromEvent：

/** Build DOM elements like ul -> li -> a **/ 

var anchor = //the anchor element that you're creating dynamically 

var source = Rx.Observable.fromEvent(anchor, 'click'); 

var subscription = source.subscribe(
    function (x) { 
     console.log('Next: Clicked!'); 
    }, 
    function (err) { 
     console.log('Error: ' + err); 
    }, 
    function() { 
     console.log('Completed'); 
    });