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()来访问模型属性。

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

无法让Backbone View为一个简单的例子工作

1 个答案: