使用Backbone JS的Masonry插件

时间:2014-04-15 00:38:06

标签: javascript backbone.js jquery-masonry

我需要使用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>

0 个答案:

没有答案