砖石无法在Ember中无限滚动 [英] Masonry not working for infinite scrolling in Ember

问题描述

我试图用无限滚动来使用Jquery Masonry作为我的图像库。砌体只适用于路线上的图像。但是在将新的图像对象推送到图像数组后，新图像出现在 Dom 但砌体不工作。我看过 Ember.js - jQuery-masonry +无限卷动并尝试但我的代码仍然无法工作。

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.

图片库路线：

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

我找不到问题在哪里。请帮助。

I couldn't find out where is the problem. Please help.

推荐答案

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中无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！