Загрузочные данные в backbone.js?

Question

Мне удалось собрать приведенный ниже код с помощью различных примеров, которые, похоже, работают нормально, но, похоже, он не загружает мои данные, может ли кто-нибудь рассказать мне, что мне не хватает?

App = (function(Backbone, _){ 
    var Note = Backbone.Model.extend(
    { 
     defaults: 
     { 
      part1: 'hello', 
      part2: 'world' 
     } 
    }); 

    var TableList = Backbone.Collection.extend({ 
     model: Note 
    }); 

    var ListRow = Backbone.View.extend(
    { 
     tagName: 'li', 

     initialize: function() 
     { 
      _.bindAll(this, 'render'); 
     }, 

     render: function() 
     { 
      $(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>'); 

      return this; 
     } 
    }); 

    var ListView = Backbone.View.extend(
    { 
     el: $('#layout_content'), 

     events: 
     { 
      'click button#add': 'addItem' 
     }, 

     initialize: function() 
     { 
      _.bindAll(this, 'render', 'addItem', 'appendItem'); 

      this.collection = new TableList(); 
      this.collection.bind('add', this.appendItem); 

      this.counter = 0; 
      this.render(); 
     }, 

     render: function() 
     { 
      var self = this; 
      $(this.el).append("<button id='add'>Add list item</button>"); 

      $(this.el).append("<ul></ul>"); 

      _(this.collection.models).each(function(item){ // in case collection is not empty 
       self.appendItem(item); 
      }, this); 
     }, 

     addItem: function() 
     { 
      this.counter++; 

      var note = new Note(); 

      note.set({part2: note.get('part2') + this.counter}); 

      this.collection.add(note); 
     }, 

     appendItem: function(item) 
     { 
      var listRow = new ListRow({ 
       model: item 
      }); 

      $('ul', this.el).append(listRow.render().el); 
     } 
    }); 

    var app = function(initialModels) 
    { 
     this.start = function() 
     { 
      this.tableList = new TableList(); 
      this.listView = new ListView({collection: this.tableList}); 
      this.tableList.reset(initialModels); 
     }; 
    }; 

    return app; 
})(Backbone, _); 

затем инициализации приложения с:

<script language="javascript"> 
    var app = new App([{"id":"95","note_title":"can we find the title"},{"id":"93","note_title":"some title"}]); 
    app.start(); 
</script> 

Answer 1

хорошо, есть несколько проблем с вашим кодом,

есть 2 проблемы в вашем методе запуска,

а) вы выбрасываете свою коллекцию

this.start = function() 
{ 
    this.tableList = new TableList(); 
    this.listView = new ListView({collection: this.tableList}); 
    this.tableList.reset(initialModels); 
}; 

, а затем в инициализировать, где вы перезаписать коллекции вы проходите вдоль

initialize: function() 
{ 
    _.bindAll(this, 'render', 'addItem', 'appendItem'); 
    this.collection = new TableList(); // this one gets overwritten, remove this line 
} 

б) вы вызываете сброс коллекции с моделями, которые вы хотите, чтобы заполнить его, но не слушать событие, либо добавить слушатель так:

this.collection.bind('reset', this.appendAllItems, this); 

или создать свою коллекцию, как это:

this.start = function() 
{ 
    this.tableList = new TableList(initialModels); 
    this.listView = new ListView({collection: this.tableList}); 
};