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

Question

我正在尝试在我的 ember 项目中进行无限滚动和砌体工作。砌体“砖”是带有文字和图像的帖子。目前我可以让第一页显示在页面的初始加载并应用砌体（但我仍然需要做一个 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

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

我猜你最好观察控制器的 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')
  ...
});

希望对你有帮助。