Ember.js - jQuery-masonry + 无限滚动

我正在尝试在我的 ember 项目中实现无限滚动和砌体工作。砖石“砖块”是带有文字和图像的柱子。目前，我可以在页面初始加载时显示第一页并应用砌体（不过，我仍然需要执行 setTimeout，试图找出如何摆脱它）。

我还有基本的无限滚动代码。现在我只是从后端抓取第二页。当滚动到页面底部时，将加载帖子的第二页。我想要弄清楚的是如何在插入时将砌体应用到新页面。

Putting $('#masonry-container').masonry('refresh') in didInsertElement不起作用，因为视图元素已经渲染，我只是将新元素附加到现有视图。

有什么活动可以让我刷新吗？

下面的代码在初始加载时应用砌体，然后在滚动到底部时加载第二页，但当前不刷新砌体。

Thanks

Routing:

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

View:

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}}

当滚动到页面底部时，将加载帖子的第二页。我想要弄清楚的是如何在插入时将砌体应用到新页面。

我想你最好观察控制器的content重新调用砌体的长度，因为附加到 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')
  ...
});

希望能帮助到你。