主干集合视图渲染

Question

我在渲染我的收藏时遇到问题......当我添加到控制台时，所有这些都在工作：

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

        }

});

//============================== 查看一个表模型

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

非常感谢您的每一个回答！！！！ 问候 万花筒

Answer 1

试试这样的：

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

....

Answer 2

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

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