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

我正在尝试在我的 ember 项目中进行无限滚动和砌体工作。砖石“砖”是带有文字和图像的帖子。目前，我可以在页面的初始加载时显示第一页并应用砌体(尽管我仍然必须执行 setTimeout，试图找出如何摆脱它)。

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

将 $('#masonry-container').masonry('refresh') 放入 didInsertElement 不起作用，因为 View 元素已经呈现，我只是将新元素附加到现有 View 中。

有没有我可以刷新的事件？

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

谢谢

路由:

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

帖子. 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}}

最佳答案

我想您最好观察 Controller 的 content 长度以重新调用 masonry，因为附加到 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')
  ...
});

希望能帮助到你。

关于javascript - Ember.js - jQuery-masonry + 无限滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18469748/