砌体不适用于 Ember 中的无限滚动
Masonry not working for infinite scrolling in Ember
我正在尝试将 Jquery Masonry 用于我的无限滚动图片库。 Masonry 仅适用于路线中的图像。但是在将新图像对象推送到 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>
图库视图:
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({});
我找不到问题出在哪里。请帮忙。
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
});
}
});
我正在尝试将 Jquery Masonry 用于我的无限滚动图片库。 Masonry 仅适用于路线中的图像。但是在将新图像对象推送到 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>
图库视图:
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({});
我找不到问题出在哪里。请帮忙。
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
});
}
});