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

物品管制员：

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

砌体不适用于Ember中的无限滚动

1 个答案: