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">要素のクリック用のストリームをアタッチすることです。要素は、 から返される最初の値でDOMに追加されていますbooksHTMLStream。これをブロック内に追加できることは知っていますsubscribeが、これは callback-soup を思い出させます - そして、私は物事を間違った方法で行っているように感じます.

ページの読み込み時に要素がないため、最初にストリームを追加することはできません<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 に答える