如何将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'); 
    });