Ember.js - jQuery-masonry +無限滾動

Question

我試圖在我的餘燼項目中獲得無限的滾動和磚石工作。磚石'磚'是文字和圖像的帖子。目前我可以得到第一頁顯示頁面的初始加載和應用石匠（我仍然必須做setTimeout，試圖找出如何擺脫這一點）。

我也有基本的無限滾動代碼。現在我只是從後端抓取第二頁。當滾動到頁面底部時，加載第二頁帖子。我試圖弄清楚的是如何在插入時將砌體應用於新頁面。

將$('#masonry-container').masonry('refresh')放在didInsertElement不起作用，因爲視圖元素已經被渲染，我只是將新元素附加到現有的視圖。

有沒有可以進行刷新的事件？

下面的代碼在初始加載時應用了砌體，然後在滾動到底部時加載第二個頁面，但當前不刷新砌體。

感謝

路由：

App.Router.map -> 
    @route 'posts', path: '/' 

App.PostsRoute = Ember.Route.extend 
    model: -> 
    App.Post.find() 

    events: 
     more: -> 
     App.Post.query(page: 2) # hard code for now, next page will come from back end 

查看：

App.PostsView = Ember.View.extend 
layoutName: 'appLayout' 
templateName: 'posts' 
controller: 'posts' 

didInsertElement: -> 
    @scheduleMasony() 
    $(window).bind('scroll', => 
    @.didScroll() 
) 

scheduleMasony: -> 
    Ember.run.schedule('afterRender', @, @applyMasonry) 

applyMasonry: -> 
    setTimeout(-> 
    $('#masonry-container').masonry(
     itemSelector: '.box', 
     columnWidth: 220, 
     gutterWidth: 10, 
     isFitWidth: true, 
     isAnimated: true 
    ) 
    2000) 

didScroll: -> 
    if @isScrolledToBottom() 
    @get('controller').send('more') 

isScrolledToBottom: -> 
    distanceToTop = $(document).height() - $(window).height() 
    top = $(document).scrollTop() 
    top == distanceToTop 

模板：

app_layout.handlebars

...layout mark up... 
<div id="container"> 
    {{yield}} 
</div> 
...more layout mark up... 

個

posts.handlebars：

<div id="masonry-container" class="transitions-enabed infinite-scroll clearfix centered"> 
{{#each controller.content}} 
    <div class="col2 box"> 
    <h3>{{title}} 
    <img {{bindAttr src="imageUrl"}} > 
    <p class="text"> 
     {{text}} 
    </p> 
    </div> 
{{/each}} 
</div> 

application.handlebars

{{outlet}} 

Answer 1

當滾動到帖子的第二頁加載的頁面的底部。我試圖弄清楚的是如何在插入時將砌體應用於新頁面。

我想你更喜歡觀察控制器的長度來重新調用石工，因爲附加到DOM與您顯示的帖子數量有關。

因此，嘗試這樣的事：

App.PostsView = Ember.View.extend({ 
    layoutName: 'appLayout' 
    templateName: 'posts' 
    controller: 'posts' 
    ... 
    contentDidChange: function() { 
    // check for 'inDOM' just to be sure 
    // we don't run this unnecessarily 
    // when the view is not yet rendered 
    if(this.get('state') === "inDOM") { 
     applyMasonry(); 
    } 
    }.observes('controller.content.length') 
    ... 
}); 

希望它能幫助。

Answer 2

本文演示如何做到這一點。 http://coryforsyth.com/2013/07/28/infinite-scrolling-with-ember-js/