Ember.js - jQuery-masonry +无限滚动 [英] Ember.js - jQuery-masonry + infinite scroll

问题描述

我正在努力在我的垃圾项目中进行无限滚动和砖石工作。砖石砖是具有文字和图像的帖子。目前，我可以得到第一页显示页面的初始加载和应用砖石（我仍然需要做一个setTimeout，尽量弄清楚如何摆脱这一点）。

我也有基本的无限滚动代码，现在我只是从后端抓住第二页。当滚动到页面的底部时，会加载第二页的帖子。我想知道的是插入时如何将砖石应用于新页面。

将 $（'＃masonry-container'）。砌砖（'刷新'） didInsertElement 不起作用，因为view元素已经呈现，我只是将新元素添加到现有视图。

是有一个事件我可以刷新？

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

谢谢

路由：

  App.Router.map  - > 
 @route'posts'，path：'/'
 
 App.PostsRou​​te = Ember.Route.extend 
 model： - > 
 App.Post.find（）
 
事件：
更多： - > 
 App.Post.query（第2页）＃硬代码现在，下一页将从后端
  

查看：

  App.PostsView = Ember.View.extend 
 layoutName：'appLayout' 
 templateName：'posts'
控制器：'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： - > 
如果@isScrolledToBottom（）
 @get（'controller'）。send（'more'）
 
 isScrolledToBottom： - > 
 distanceToTop = $（document）.height（） -  $（window）.height（）
 top = $（document）.scrollTop（）
 top == distanceToTop 
  

模板：

app_layout.handlebars

  ...布局标记... 
< div id =container> 
 {{yield}} 
< / div> 
 ...更多布局标记... 
  

posts.handlebars：

 < div id =masonry-containerclass =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}} 
  

解决方案

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

我想你最好观察控制器的内容长度重新调用砖石，因为附加到DOM与您显示的帖子数量有关。

所以尝试这样的东西：

  App.PostsView = Ember.View.extend（{
 layoutName ：'appLayout'
 templateName：'posts'
控制器：'posts'
 ... 
 contentDidChange：function（）{
 //检查'inDOM'只要确保
 //当视图尚未呈现时，我们不会运行这个不必要的
 // 
 if（this.get（'state'）===inDOM ）{
 applyMasonry（）; 
} 
} .observes（'controller.content.length'）
 ... 
}）; 
  

希望有帮助。

I'm trying to get infinite scrolling and masonry working in my ember project. The masonry 'bricks' are posts with text and an image. Currently I can get the first page to show on the initial load of the page and apply masonry (I still have to do a setTimeout though, trying to figure out how to get rid of that as well).

I also have the basic infinite scroll code in. For now I'm simply grabbing the second page from the back end. When scrolled to the bottom of the page the second page of posts are loaded. What I'm trying to figure out is how to apply masonry to the new page upon insertion.

Putting $('#masonry-container').masonry('refresh') in didInsertElement doesn't work since the view element is already rendered and I'm simply appending new elements to the existing view.

Is there an event I can put the refresh in?

The code below applies masonry on the initial load and then loads the second page when scrolled to the bottom, but does not currently refresh masonry.

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

Templates:

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

解决方案

When scrolled to the bottom of the page the second page of posts are loaded. What I'm trying to figure out is how to apply masonry to the new page upon insertion.

I guess you are better of on observing the controller's content length to re-invoke masonry since the appending to the DOM relates with the number of posts you are showing.

So try something like this:

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')
  ...
});

Hope it helps.

这篇关于Ember.js - jQuery-masonry +无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！