jquery - Masonry 不适用于 Ember 中的无限滚动

Question

我正在尝试使用 Jquery Masonry 来实现无限滚动的图片库。 Masonry 仅适用于 route 的图像。但是将新图像对象推送到 images 数组后，新图像出现在 Dom 中，但 Masonry 不起作用。我见过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>

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

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

项目 Controller :

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