当我尝试获取它时，为什么这个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'）的结果时，我得到了未定义的内容！

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

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

修改

根据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);