Javascript 主干集合视图渲染

我在渲染我的收藏时遇到问题。。。当我将此添加到控制台时，所有操作都将自动完成：

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

我从json文件中看到了我所有的名字。之后，我可以使用：

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

 window.App = {

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

window.template = function (id) {

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

添加下一个立即渲染的对象。

我的代码：

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();

        }

});

//========================================一个表模型的视图

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 });

非常感谢您的回答！！！！ 当做

---

Makromat

在尝试呈现集合之前，请确保等待异步操作的结果：

tablesCollection.fetch({
    success : function(collection, response, options){
     var tablesView = new App.Views.Tables({ collection: tablesCollection });
     $(document.body).append(tablesView.render().el);
    }
});

---

试着这样做：

var fetch = mycollection.fetch();
fetch.done(function(){
   $(body).html(_.template(mytemplate, {obj: obj});
});

在初始化集合视图内部添加以下内容：

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

    el: '#content',

    template: _.template('<h1>My template</h2>'),

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

    },
    render: function(){
        this.$el.html(this.template());
    }

App.Views.Tables=Backbone.View.extend({
el:'内容'，
模板：u.template（“我的模板”），
初始化：函数（）{
this.collection=新建App.Collections.Tables（）；
this.collection.fetch（{reset:true}）；
this.collection.on（'reset'，this.render））；
this.collection.on（'add'，this.addOne，this）；
},
render:function（）{
this.el.html（this.template（））；
}

---

..

谢谢你的回答，但我可以在哪里添加你的代码？我在jsfiddle.net/makromat/hfYHm/1Thanks上有这个答案！！现在我又编辑了代码…请检查（更新了我的答案），尝试在tables视图中添加reset to initialize。更新的jfiddle看起来像这样。集合未在视图中实例化。更新了我的答案。仍然没有任何内容…我已添加console.log（'initialized'）；在初始化函数中添加代码，但不起作用…现在我已添加TableView=new App.Views.tables（）；且控制台中为未捕获的TypeError:无法调用未定义的方法“empty”