javascript - 无法让主干 View 工作的简单示例

Question

我正在尝试使用 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 });

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

Answer 1

为了让你的代码工作，你必须替换

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

与

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

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

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