Backbone.js模型属性未定义错误

时间:2012-12-22 23:31:34

标签: backbone.js backbone.js-collections

我对Backbone.js很新,我正试图让这个简单的例子起作用。基本上,在jsFiddle运行代码时,它告诉我没有定义属性“firstname”。

这是小提琴的链接: http://jsfiddle.net/cpeele00/YjUBG/16/

var User = Backbone.Model.extend({});

var UserList = Backbone.Collection.extend({
   model: User
});

var UserView = Backbone.View.extend({
   el: $('#user-list ul'),
   template: _.template($('#user-list-template').html()),
   render: function() {
       this.$el.html(this.template(this.model.toJSON()));
       return this;
   }
});

var user1 = new User();
user1.set({
   firstname: 'Momo',
   lastname: 'Peele'
});

var user2 = new User();
user2.set({
   firstname: 'Bobo',
   lastname: 'Peele'
});


var users = new UserList([user1, user2]);

var userView = new UserView({model: users});

userView.render();

任何帮助解决这个问题都将非常感激。

V / R

克里斯

1 个答案:

答案 0 :(得分:1)

由于模型实际上是一个集合,因此需要对其进行迭代,并将模板应用于集合中的每个模型。一种方法是使用Underscore扩展Collection.each

render: function() {
    // clear the view
    this.$el.empty();

    // save a reference to the view object
    var self = this;

    // iterate over the collection
    this.model.each(function(singleModel) {

        // render the model
        self.$el.append(self.template(singleModel.toJSON()));
    });

    return this;
}

Here's the updated Fiddle.

(如果您愿意,也可以将迭代放入模板中,但我认为通常最好将代码保留在视图中,而不是模板中。)