La albañilería no funciona para el desplazamiento infinito en Ember

Estoy tratando de usar Jquery Masonry para mi galería de imágenes con desplazamiento infinito. Mampostería solamente funciona para las imágenes de la ruta. Pero después de empujar el nuevo objeto de imagen a la matriz de images , la nueva imagen aparece en la Dom pero la Masonería no funciona. He visto Ember.js – jQuery-masonry + infinite scroll y lo probé pero mi código aún no funciona.

Galería de imágenes de ruta:

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

Plantilla imagegallery.hbs :

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

Vista de la galería de imágenes:

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

Controlador de galería de imágenes:

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

Controlador de artículo:

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

No pude averiguar dónde está el problema. Por favor ayuda.

Desandro solucionó este problema:

 $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 }); } });