backbone.js - BackboneJS: ビューは正常にレンダリングされるが、未定義のコレクションで更新される

Question

私は数週間 Backbone をいじっていて、チュートリアルに基づいていくつかの簡単なアプリケーションを作成しました。今、私は再びゼロから始めて、Backbone が提供する優れた機能を想定どおりに使用しようとしました。

視界が邪魔だけど。ページが読み込まれると、適切にレンダリングされ、コレクションを反復してネストされたビューが作成されます。render() を再度呼び出して 1 つのエントリだけのリスト全体を更新すると、すべてのビュー属性が未定義のように見えます。

単一エントリのモデル:

Entry = Backbone.Model.extend({
});

エントリのリスト: (json.html はデータサイドのプレースホルダーです)

EntryCollection = Backbone.Collection.extend({
    model: Entry, 
    url: 'json.html'
});

var entries = new EntryCollection();

アンダースコア テンプレートを埋め、モデルが変更されたときにそれ自体を再レンダリングする必要がある単一のエントリを表示します。

EntryView = Backbone.View.extend({
    template: _.template($('#entry-template').html()), 
    initialize: function(){
        this.model.on('change', this.render);
    },
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

コレクション内の各アイテムの EntryView をレンダリングし、新しいアイテムが追加された場合はそれ自体を再レンダリングするエントリのリスト全体のビュー。このボタンはテスト用です。

EntryListView = Backbone.View.extend({
    tagName: 'div',
    collection: entries, 
    events: {
        'click button': 'addEntry'
    },
    initialize: function(){
        this.collection.on('add',this.render);
    },
    render: function(){
        this.$el.append('<button>New</button>');  //to test what happens when a new item is added
        var els = [];
        this.collection.each(function(item){
            els.push(new EntryView({model:item}).render().el);
        });
        this.$el.append(els);
        $('#entries').html(this.el);
        return this;
    },
    addEntry: function(){
        entries.add(new Entry({
            title: "New entry", 
            text: "This entry was inserted after the view was rendered"
        }));
    }
});

ここで、サーバーからコレクションをフェッチすると、ビューは正常にレンダリングされます。

entries.fetch({
    success: function(model,response){
        new EntryListView().render();
    }
});

コレクションにアイテムを追加するボタンをクリックするとすぐに、EntryListView のイベント ハンドラーが「追加」イベントをキャッチし、render() を呼び出します。しかし、レンダリング関数にブレークポイントを設定すると、すべての属性が「未定義」に見えることがわかります。ないel、ないcollection...

どこが間違っていますか？ご協力ありがとうございます。

ロバート