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

// ============================ TABLE MODEL

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

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

// ====================== TABLES COLLECTION

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

Answer 1

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

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

Answer 2

尝试这样的事情：

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

在initialize collection视图中添加：

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

...

骨干集合视图呈现

2 个答案: