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

然后将集合传递给你想要的view

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

这就是您在此代码中的全部错误。一些无关紧要的注释:

• 您使用的是 _(this.collection.models).each。 Backbone collections use underscore将所有这些功能暴露在自己身上，因此相当于 this.collection.each

• 您实际上并不需要 ItemView 上的“unrender”方法，但由于您没有使用它，我猜您正在使用它进行调试。