Masonry not working for infinite scrolling in Embe

问题:

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. Please help.

回答1:

desandro solved this problem:

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