我需要使用Masonry插件来使用Backbone。当我静态生成HTML而不是Backbone时,砌体工作得很好 - 所以我猜测我做了Backbone的错误。
我从外部API抓取图像网址,渲染它们,然后尝试调用Masonry。我假设这应该在所有渲染之后完成,并且我使用ImagesLoaded。
JS:
app.WallView = Backbone.View.extend({
el: '#wall',
initialize: function() {
this.collection = new app.ImageCollection();
this.collection.fetch({reset: true});
this.render();
this.listenTo( this.collection, 'reset', this.render );
},
render: function() {
this.collection.each(function( item ) {
this.renderImage( item );
}, this );
var $container = $("#wall");
$container.imagesLoaded( function() {
$container.masonry({
});
});
},
renderImage: function( item ) {
var imageView = new app.ImageView({
model: item
});
this.$el.append( imageView.render().el );
}
});
new app.WallView();
HTML片段:
<div id="wall" class="images"></div>
<script type="text/template" id="image-template">
<img src="<%= url %>"></img>
</script>