为什么当我尝试获取此 Backbone 模型的属性时未定义它？

Question

我有一个简单的 REST API，它可以为我提供有关 /api/items/:id 的项目的数据，包括 ID 和名称。我正在使用路由器来组织我的 Backbone 视图。 edit 路由实例化了一个 FormEditItem 视图，并将 URL 中的 ID 传递给它。

要从 API 获取模型的数据，表单视图会实例化一个新模型，设置 ID，然后调用模型的 fetch 方法。 （this thread推荐的第二种方法。）

模型声明极其简单：

App.Models.Item = Backbone.Model.extend({

    urlRoot: 'api/items'

});

这是我的表单视图：

App.Views.FormEditItem = Backbone.View.extend({

    template: _.template($('#tpl-formEditItem').html()),

    initialize: function(opts) {
        _.bindAll(this, "render");
        this.modelID = opts.modelID;
        this.parent = opts.parent;
        this.model = new App.Models.Item({id: this.modelID});
        this.model.fetch();
        this.render();
    },

    render: function() {
        console.log('Starting render:', this.model);
        console.log(this.model.get('name'));
        this.parent.$el.append(this.template(this.model.toJSON()));
        return this;
    }

});

在我的表单视图的渲染功能中，我正在注销模型。我可以看到模型的属性。但是在下一行，当我尝试注销 get('name') 的结果时，我得到了 undefined！

发生了什么事？在尝试从数据库中获取模型属性之前，是否需要定义它们？

================================================ ===============================

编辑

按照 Stephen 和 Rida 的建议，解决此问题的方法是为模型的 change 事件添加一个事件侦听器。 fetch 操作需要一些时间从 API 获取数据：我试图在数据到达之前输出数据。所以我的初始化函数应该是：

    initialize: function(opts) {
        _.bindAll(this, "render");
        this.modelID = opts.modelID;
        this.parent = opts.parent;
        this.model = new App.Models.Item({id: this.modelID});
        this.listenTo(this.model, 'change', this.render);
        this.model.fetch();
    }

非常感谢大家！

Answer 1

问题是您试图在获取完成之前呈现视图。在初始化时，您调用

this.model.fetch()

然后立即调用

this.render()

此时提取不会完成，因此不会有name 属性。

当你在控制台中查看模型时，那是在获取完成之后，所以会有一个name

Answer 2

而不是这些行：

this.model.fetch();
this.render();

试着去做

this.listenTo(this.model, 'change', this.render);