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

然後在intialize是你改寫你一起

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

b通過）你觸發與您要使用填充它的模型的集合重置的集合，但不聽的情況下，無論添加監聽器是這樣的：

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

或創建您的收藏這樣的：

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