Масонство не работает для бесконечной прокрутки в Ember

Question

Я пытаюсь использовать JQuery Masonry для моей галереи изображений с бесконечной прокруткой. Масонство работает только для изображений на маршруте. Но после нажатия нового объекта изображения на images массив, новое изображение появляется в Dom, но масонство не работает. Я видел Ember.js - jQuery-masonry + infinite scroll и пытался, но мой код все еще не работает.

Картинная галерея маршрут:

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 шаблона:

<div id="galleryContainer"> 
    {{#each img in images itemController="galleryimage"}} 
    <div class="item thumb"> 
    {{#if img.img_visible}} 
     <img {{bind-attr src=img.src_path}}/> 
    {{/if}} 
    </div> 
    {{/each}} 
</div> 

вид Галерея изображений:

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

Item контроллер:

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