Javascript 在RxJS中基于异步加载DOM创建流

我通过ajax调用加载一组项-这是我的初始DOM：

<section class="books">
</section>

通过订阅

responseStream

（并将JSON响应转换为HTML），我将其添加到DOM中，如下所示：

booksHTMLStream = responseStream
  .map (json) ->
    _.map(json.books, (book) -> bookTemplate(book))

bookHTMLStream.subscribe(
  (html) ->
    booksContainer.html(html)
)

现在，我想做的是为点击

元素附加一个流，这些元素在

booksHTMLStream

返回的第一个值中被添加到DOM中。我知道我可以在

subscribe

块中添加这个，但这让我想起了回调汤-我觉得我做事情的方式不对

由于页面加载时没有

元素，因此我无法在开始时添加蒸汽，因此流从不触发任何值。所以，我想知道的是，是否有可能异步地将源添加到流中，或者是否有任何好的方法来实现我想要的，而不会变成混乱的情况

---

干杯：-）

我通过为整个文档创建一个点击流，然后根据

事件进行过滤，从而解决了这个特殊问题。target

clickStream = Rx.Observable.fromEvent document, 'click'

queryStream = clickStream
  .filter (event) ->
    $(event.target).attr('id') == 'query-button'

bookClickStream = clickStream
  .filter (event) ->
    $(event.target).hasClass('book') || $(event.target).parents('.book').length > 0

不过，可能有更好的解决方案，我很想听听：-）

---

我还没有测试过这段代码，但基本上就是这个想法。

非常感谢您的回复！：-）你能为我这样一个不熟悉的灵魂解释一下这个解决方案背后的想法吗？我们首先应用

。取1

只从

booksHTMLStream

获取第一个

booksHTML

。然后我们想把所有的图书元素映射到来自任何元素的点击。首先，我们（平面）将

bookElements

映射到元素流。然后结果是一个元素流。因此，我们只需将每个元素平面映射到其单击事件流。只需询问您是否需要进一步澄清。但我有一个问题：

booksHTMLStream

不是由我需要定义

booksclickstream

的点定义的（因为HTML是异步加载的）。我需要在获取

booksClickStream使用的HTML的流之前定义
booksClickStream
-有什么方法可以做到这一点吗？是的。在上述代码中，将
booksHTMLStream
替换为
booksHTMLSubject
，然后在
booksclickstream
之前声明
var booksHTMLSubject=new Rx.Subject（）
。当
booksHTMLStream
可用时，订阅它并在subscribe函数内调用
booksHTMLSubject.onNext（x）
。
booksHTMLStream = responseStream
  .map (json) ->
    _.map(json.books, (book) -> bookTemplate(book))

bookHTMLStream.subscribe(
  (html) ->
    booksContainer.html(html)
)

clickStream = Rx.Observable.fromEvent document, 'click'

queryStream = clickStream
  .filter (event) ->
    $(event.target).attr('id') == 'query-button'

bookClickStream = clickStream
  .filter (event) ->
    $(event.target).hasClass('book') || $(event.target).parents('.book').length > 0

bookClickStream = booksHTMLStream
  .take 1
  .flatMap (bookElements) ->
    Rx.Observable.fromArray bookElements
  .flatMap (bookElement) ->
    Rx.Observable.fromEvent bookElement, 'click'