javascript - 在 RxJS 中基于异步加载的 DOM 创建流

Question

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

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

通过 AJAX 调用，我从我的服务器加载一些书籍，以 JSON 形式返回，以创建以下 DOM 结构:

<section class="books">
  <section class="book">
    ..
  </section>
  <section class"book">
  ..
  </section>
  # and so on
</section>

这是我执行 AJAX 调用的方式:

buttonClickStream = Rx.Observable.fromEvent queryButton, 'click'

requestStream = buttonClickStream
  .map ->
    bookName = $('#query').val()
    "/books/list?book=#{bookName}"

responseStream = requestStream
  .flatMap (requestUrl) ->
    disableForm()
    Rx.Observable.fromPromise $.getJSON(requestUrl)

并通过订阅 responseStream (并将 JSON 响应转换为 HTML)，我将它添加到 DOM 中，如下所示:

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

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

现在，我想做的是附加一个点击流 <section class="book">从 booksHTMLStream 返回的第一个值中添加到 DOM 的元素.我知道我可以在 subscribe 的内部添加这个 block ，但这让我想起了回调汤 - 我觉得我做事的方式不对。

我最初无法添加 Steam ，因为没有 <section class="book">页面加载时的元素，因此流永远不会触发任何值。所以，我想知道是否可以将源异步添加到流中，或者是否有任何好的方法可以在不变成困惑的回调情况的情况下完成我想要的？

干杯:-)

Answer 1

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

尚未测试此代码，但大致就是这个想法。