Backbone коллекции рендеринга

Question

У меня есть проблемы с вынести мою коллекцию ... все работает со мной, когда я добавляю в консоль этого:

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

// ============================ ТАБЛИЦА MODEL

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; 

    }, 
}); 

// ================ НОВАЯ КОЛЛЕКЦИЯ INSTANCE

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

// =================== ===== НОВЫЕ ТАБЛИЦЫ ПРОСМОТР ИНСТРУКЦИИ

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

Очень спасибо за каждый ответ !!!! С уважением Makromat

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