javascript - 一个简单的例子，无法使 Backbone View 正常工作

我正在尝试使用Backbone.js编写一个简单的示例进行研究。一些如何在浏览器中不打印的内容。这里需要一点帮助。代码如下。

HTML：

<div id="container">
    <ul id="person-list">
    </ul>
</div>

楷模

var Person = Backbone.Model.extend({
    defaults: {
        id: 0,
        name: ''
    }
});

var PersonStore = Backbone.Collection.extend({
    model: Person,
    url: 'api/person', //currently not using
    initialize: function () {
        console.log("Store initialize");
    }
});

观看次数

var PersonView = Backbone.View.extend({
    tagName: 'li',
    initialize: function () {
        _.bindAll(this, "render");
    },
    render: function () {
        $(this.el).append(this.model.name) //model.name shows undefined here
        return this;
    }
});

var PersonListView = Backbone.View.extend({
    el: $('#person-list'),
    tagName:'ul',
    initialize: function () {
        _.bindAll(this, "render");
        this.render();
    },
    render: function () {
        self = this;
        this.collection.each(function (person) { //name property undefined here on person
            var personView = new PersonView({ model: person });
            $(self.el).append(personView.render().el);
        });
    }
});

样品运行

var persons = new PersonStore([
     new Person({id:1, name: "Person 1"}),
     new Person({ id: 2, name: "Person 2" }),
]);
new PersonListView({ collection: persons });

上面的设置在屏幕上不打印任何内容（空白）。我已经苦苦挣扎了一段时间，这里需要一些帮助，以了解为什么两个人的名字没有显示在浏览器中。

最佳答案

为了使代码正常工作，您必须替换

this.$el.append(this.model.name)

与

this.$el.append(this.model.get('name'))

始终使用方法.get()访问模型属性。

另外，我强烈建议您使用模板来呈现视图。这种方法使您只需编写一次.render()实现，如果需要进行视觉更改，则无需更改它，您可以在模板中进行