1

私はバックボーンとhandlebars.jsに不慣れです。プログラムで新しいアイテムをコレクションに追加しようとしていますが、バックボーンでRenderを使用してコレクションをレンダリングしたいと思います。

私は何が間違っているのですか？

var Item = Backbone.Model.extend({
    defaults: {
    }
});

var List = Backbone.Collection.extend({
    model: Item
});

var ListView = Backbone.View.extend({
    el: $('BODY'), // el attaches to existing element
    initialize: function () {
        _.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here

        this.collection = new List();
        this.render();
    },
    render: function () {
        var template = Handlebars.compile($('#screenshot_template').html());
        $(this.el).html(template({
            row: this.collection
        }));
        return this;
    }

});

var listView = new ListView();
window.screenshots = listView;
window.screenshots.collection.add({
    myurl: 'http://placehold.it/350x150'
});

私のハンドルバーテンプレートは次のようになります：

<script id="screenshot_template" type="text/x-handlebars-template">
    {{#each row}}
    <div><img src="{{this.myurl}}"></div>
    {{/each }}
</script>
4

1 に答える 1

2

ビューにリスナーを追加して、コレクションがいつ追加イベントを発生させているかを認識できるようにします。通常は、ビューの初期化関数で実行されます。

this.collection.on('add', this.render);

明らかに、コレクションをインスタンス化した後で追加することをお勧めします。

于 2012-11-15T21:06:46.320 に答える