0

コレクションのレンダリングに問題があります...これをコンソールに追加すると、すべてが機能します： 

$('body').append(tablesView.render().el);

json ファイルの li にすべての名前が表示されます。その後、次のことができます：

tablesCollection.create({ name:'Next Table Name' });

すぐにレンダリングされる次のオブジェクトを追加します。

私のコード:

 window.App = {

    Models: {},
    Views: {},
    Collections: {}
};

window.template = function (id) {

    return _.template($('id' + id).html());
};

//============================ テーブルモデル

App.Models.Table = Backbone.Model.extend({

    defaults: {
            name: 'Table Name',
        },
});

//====================== テーブルコレクション

App.Collections.Tables = Backbone.Collection.extend({

    model: App.Models.Table,

    url: 'tables.json'
});

//============== コレクションから各テーブルモデルを表示

App.Views.Tables = Backbone.View.extend({

    tagName: 'ul',


    initialize: function() {
        this.collection.fetch({reset:true});
        this.collection.on('reset', this.render);
        this.collection.on('add', this.addOne, this );

    },

    render: function () {

        this.collection.each(this.addOne, this);

        return this;

        },

    addOne: function(table) {

        var table = new App.Views.Table({ model: table });

        this.$el.append( table.render().el );

        table.render();

        }

});

//============================= 1 つのテーブル モデルの表示

App.Views.Table = Backbone.View.extend({

    tagName: 'li',

    initialize: function() {

      this.model.on('destroy', this.remove, this)  

    },

    render: function () {

        this.$el.html( this.model.get('name') );

        return this;

    },
});

//================ 新しいコレクションインスタンス

var tablesCollection = new App.Collections.Tables();

//======================== 新しいテーブル ビュー インスタンス

var tablesView = new App.Views.Tables({ collection: tablesCollection });

すべての回答に感謝します!!!! よろしくマクロマット

4

2 に答える 2

0

コレクションをレンダリングする前に、非同期フェッチ操作の結果を待っていることを確認してください。

tablesCollection.fetch({
    success : function(collection, response, options){
     var tablesView = new App.Views.Tables({ collection: tablesCollection });
     $(document.body).append(tablesView.render().el);
    }
});
于 2013-09-16T14:07:18.600 に答える