4

我通过 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. 我知道我可以在块中添加它，但这subscribe让我想起了回调汤——我觉得我做事的方式不对。

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

干杯:-)

4

2 回答 2

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

尚未测试此代码，但大致就是这样。

于 2014-11-21T20:18:54.790 回答
0

我通过为整个文档制作点击流，然后基于event.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

不过可能有更好的解决方案，我很想听听他们:-)

于 2014-11-21T12:55:28.340 回答