Masonry not working for infinite scrolling in Ember


#1

I’m trying to use Jquery Masonry for my image gallery with infinite scrolling. Masonry is only working for the images in the route. But after pushing new image object to images array, the new image appears in the Dom but Masonry not working. I’ve seen Ember.js - jQuery-masonry + infinite scroll and tried but my code still not working.

Image gallery route:

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 template:

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

Image gallery view:

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

Image gallery controller:

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 controller:

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

I couldn’t find out where is the problem.


#2

Bump … did you ever get this working?


#3

Ah not to worry, found that you’d raised an issue and got your solution here: