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”方法，但由于你没有使用它，我猜你正在使用它进行调试。

在Backbone.js中加载初始数据

1 个答案: