加載在Backbone.js的

Question

初始數據我是新來的Backbone.js的和MVC所以道歉，如果這是一個愚蠢的問題...

我一直在嘗試一些Backbone.js的教程的走出去，我正在努力研究如何將一組初始數據加載到頁面上。

如果任何人都可以指向正確的方向或向我展示我在下面丟失的東西，將不勝感激！

謝謝！

代碼低於或：http://jsfiddle.net/kiwi/kgVgY/1/

的HTML：

添加列表項

的JS：

(function($) { 
    Backbone.sync = function(method, model, success, error) { 
    success(); 
} 

var Item = Backbone.Model.extend({ 
    defaults: { 
     createdOn: 'Date', 
     createdBy: 'Name' 
    } 
}); 


var List = Backbone.Collection.extend({ 
    model: Item 
}); 


// ------------ 
// ItemView 
// ------------ 
var ItemView = Backbone.View.extend({ 
    tagName: 'li', 
    // name of tag to be created   
    events: { 
     'click span.delete': 'remove' 
    }, 

    // `initialize()` now binds model change/removal to the corresponding handlers below. 
    initialize: function() { 
     _.bindAll(this, 'render', 'unrender', 'remove'); // every function that uses 'this' as the current object should be in here 
     this.model.bind('change', this.render); 
     this.model.bind('remove', this.unrender); 
    }, 

    // `render()` now includes two extra `span`s corresponding to the actions swap and delete. 
    render: function() { 

     $(this.el).html('<span">' + this.model.get('planStartDate') + ' ' + this.model.get('planActivity') + '</span> &nbsp; &nbsp; <span class="delete">[delete]</span>'); 
     return this; // for chainable calls, like .render().el 
    }, 

    // `unrender()`: Makes Model remove itself from the DOM. 
    unrender: function() { 
     $(this.el).remove(); 
    }, 

    // `remove()`: We use the method `destroy()` to remove a model from its collection. 
    remove: function() { 
     this.model.destroy(); 
    } 
}); 


// ------------ 
// ListView 
// ------------ 
var ListView = Backbone.View.extend({ 
    el: $('body'), 
    // el attaches to existing element 
    events: { 
     'click button#add': 'addItem' 
    }, 

    initialize: function() { 
     _.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here 
     this.collection = new List(); 
     this.collection.bind('add', this.appendItem); // collection event binder 
     this.render(); 
    }, 

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

    addItem: function() { 
     var item = new Item(); 

     var planStartDate = $('#planStartDate').val(); 
     var planActivity = $('#planActivity').val(); 

     item.set({ 
      planStartDate: planStartDate, 
      planActivity: planActivity 
     }); 

     this.collection.add(item); 
    }, 

    appendItem: function(item) { 
     var itemView = new ItemView({ 
      model: item 
     }); 
     $('ul', this.el).append(itemView.render().el); 
    } 
}); 

var listView = new ListView(); 
})(jQuery); 

謝謝。

Answer 1

下面是修改後的例子：http://jsfiddle.net/kgVgY/2/

您的數據第一次創建集合你想

var list = new List([{ 
     createdOn: 'Jan', 
     createdBy: 'John', 
    planStartDate: "dfd", 
    planActivity: "dfdfd" 
    }]); 

，然後收集傳遞給你想要

var listView = new ListView({collection: list}); 

認爲這是對你在這段代碼中錯了。一些次要的無關注釋：

• 您正在使用_（this.collection.models）.each。 Backbone collections use underscore在自己身上暴露所有這些功能，所以這相當於this.collection.each

• 你並不真的需要ItemView的「unrender」方法，但由於你沒有使用我猜測你正在使用它進行調試。