我正在尝试使用 Jquery Masonry 来无限滚动我的图片库。 Masonry 仅适用于路线中的图像。但是在将新图像对象推送到之后images
array, 新形象出现在Dom
但砌体不起作用。我见过Ember.js - jQuery-masonry + 无限滚动 https://stackoverflow.com/questions/18469748/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
},
...
]
};
}
});
图片库.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({});
我找不到问题出在哪里。请帮忙。