砌体不适用于Ember中的无限滚动

我正在尝试使用Jquery Masonry为我的图片库无限滚动。 砌体只适用于路线中的图像。 但是在将新图像对象推送到imagesarrays之后， 新图像出现在Dom但是砌体不起作用。 我见过Ember.js – jQuery-masonry +无限滚动并试过但我的代码仍无法正常工作。

图片库路线：

 App.ImggalleryRoute = Ember.Route.extend({ model: function(){ return { images: [ { name: "car", src_path: "0dbf51ac84e23bd64d652f94a8cc7a22.png", img_visible: true }, { name: "block", src_path: "3b7bca99e44b3f07b4051ab70d260173.png", img_visible: true }, ... ] }; } }); 

imagegallery.hbs模板：

 
 {{#each img in images itemController="galleryimage"}} 
 {{#if img.img_visible}}  {{/if}} 
 {{/each}}  

图库清单：

 App.ImggalleryView = Ember.View.extend({ templateName: "imggallery", didInsertElement: function(){ this.scheduleMasonry(); $(window).on('scroll', $.proxy(this.didScroll, this)); }, willDestroyElement: function(){ this.destroyMasonry(); $(window).off('scroll', $.proxy(this.didScroll, this)); }, scheduleMasonry: (function(){ Ember.run.scheduleOnce('afterRender', this, this.applyMasonry); }).observes('controller.images.@each'), applyMasonry: function(){ var $galleryContainer = $('#galleryContainer'); // initialize $galleryContainer.imagesLoaded(function() { $galleryContainer.masonry({ itemSelector: '.item', columnWidth: 150 }); }); }, destroyMasonry: function(){ $('#galleryContainer').masonry('destroy'); }, didScroll: function(){ if($(window).scrollTop() + $(window).height() == $(document).height()){ console.log("bottom!"); this.get('controller').send('loadMoreGalleryPics'); } } }); 

图库控制器：

 App.ImggalleryController = Ember.ObjectController.extend({ actions: { loadMoreGalleryPics: function(){ this.get('images').pushObject({ name: 'dice', src_path: 'dba8b11658db1b99dfcd0275712bd3e1.jpg', img_visible: true }); console.log('yes!'); } } }); 

物品管制员：

 App.GalleryimageController = Ember.ObjectController.extend({}); 

我无法找出问题所在。 请帮忙。

Answer 1

desandro解决了这个问题：

 $galleryContainer.imagesLoaded(function() { // check if masonry is initialized var msnry = $galleryContainer.data('masonry'); if ( msnry ) { msnry.reloadItems(); // disable transition var transitionDuration = msnry.options.transitionDuration; msnry.options.transitionDuration = 0; msnry.layout(); // reset transition msnry.options.transitionDuration = transitionDuration; } else { // init masonry $galleryContainer.masonry({ itemSelector: '.item', columnWidth: 150 }); } });