创建流上异步加载DOM中RxJS

问题描述：

我加载一组通过Ajax调用的项目 - 这是我的INTIAL DOM：创建流上异步加载DOM中RxJS

<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区块内添加这个，但这让我想起了回拨汤 - 而且我觉得我在做错误的方式。

由于页面加载时没有<section class="book">元素，所以我不能最初添加蒸汽，因此流不会触发任何值。所以，我想知道的是，是否有可能异步地将数据源添加到流中，或者如果有什么好方法可以实现我想要的功能，而不会变成杂乱的回调状况？

干杯:-)

答

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

没有测试代码，但大致的想法。

非常感谢您的回复！ :-)你能解释这个解决方案背后的想法吗？ – nicohvi 2014-11-22 11:33:37

我们首先应用'.take 1'来仅从'booksHTMLStream'获得第一个'booksHTML'。然后，我们要将所有书籍元素映射到来自任何元素的点击。首先，我们（平面）将'bookElement'映射到元素流。然后结果是一系列元素。所以我们只是将每个元素平面地映射到它的点击事件流。只是问你是否需要更多的澄清。 – 2014-11-23 16:17:29

非常感谢，谢谢！ :-) – nicohvi 2014-11-24 08:34:32

答

我解决了通过使点击流整个文档，然后这个特殊问题滤波基础上，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

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

创建流上异步加载DOM中RxJS

相关推荐