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.
Image gallery route:
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 template:
<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>
Image gallery 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');
}
}
});
Image gallery 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!');
}
}
});
Item controller:
App.GalleryimageController = Ember.ObjectController.extend({});
I couldn’t find out where is the problem.