backbone.js - 重写的 parse() 不设置模型属性

Question

我有一个链接到两个子模型的模型，如下所示:

var SubModel = Backbone.Model.extend({
    defaults: {
        headline: null,
        image_url: null,
        url: null
    }
});

var MainModel = Backbone.Model.extend({
    defaults: {
        subModelA: null,
        subModelB: null,
        title: null
    },

    urlRoot: function() {
        if (this.isNew()) {
            return '/mainmodel/new';
        }
        return '/mainmodel';
    },

    initialize: function() {
        this.fetch();
    },

    parse: function(data) {
        var response = {};
        response.subModelA = new SubModel(data.subModelA);
        response.subModelB = new SubModel(data.subModelB);
        response.title = data.title;
        return response;
    }
});

我目前遇到的问题是调用 var mainModelInstance = new MainModel() 确实正确地从 /mainmodel/new 获取，但是 mainModelInstance.attributes 始终是空白对象 {}。

var mainModelInstance = new MainModel();
mainModelInstance.attributes; // Returns {}

这是服务器对 /mainmodel/new 的响应示例:

{
    "title": "Politics",
    "subModelA": {
        "headline": "Investigators: Iran tried to smuggle suicide belts, missiles by boat into Yemen",
        "url": "http://dailycaller.com/2013/02/09/yemen-minister-says-weapons-came-from-iran/",
        "image_url": "http://cdn01.dailycaller.com/wp-content/uploads/2013/02/54c7d52e1a384db489ab9ea568afddb0-e1360455589316.jpg"
    },
    "subModelB": {
        "headline": "Review: Who needs Windows RT? Acer's Iconia W510 runs the real thing",
        "url": "http://arstechnica.com/gadgets/2013/02/review-who-needs-windows-rt-acers-iconia-w510-runs-the-real-thing/",
        "image_url": "http://cdn.arstechnica.net/wp-content/uploads/2013/02/w510-main-640x388.jpg"
    }
}

似乎模型的属性没有通过parse 更新。为什么不更新模型的属性？

Answer 1

您的代码可能也能正常工作，但您没有正确测试它

您正在初始化方法中调用 this.fetch。调用 model.fetch 是一个异步调用，当您尝试计算 mainModelInstance.attributes 时，http 请求调用尚未完成。

你应该测试这个:

var mainModelInstance = new MainModel();
mainModelInstance.on('change', function() {
  console.log(mainModelInstance.toJSON());
});

或者更好的是，不要在 initialize 时自动获取(无论如何这都不是最佳实践)并使用 jQuery promise 模式:

var mainModelInstance = new MainModel();
mainModelInstance.fetch().done(function () {
  console.log(mainModelInstance.toJSON());
});