在Backbone.js中加载初始数据

我对backbone.js和MVC很陌生，所以如果这是一个愚蠢的问题，我道歉…

我一直在尝试一些backbone.js教程在那里，我试图找出如何加载一组初始数据到页面上。

如果有人能给我指出正确的方向或告诉我我错过了什么，这将是非常感激的!

谢谢!

代码在以下或在:http://jsfiddle.net/kiwi/kgVgY/1/

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

谢谢。