与backbonejs模型对象json表示有关的问题

Question

我有一个与包含的backbonejs 模型对象有关的问题。 使用https://github.com/yeoman/generator-backbone 中描述的 yeoman 主干生成器，我创建了一个主干应用程序来测试包含另一个模型对象的模型对象如何以 json 格式发送到后端服务器。

我在此测试应用程序中添加了两个模型联系人和地址。

哟主干：模特联系方式

哟主干：模型地址

联系人对象包含一个地址对象。联系人和地址骨干模型对象如下所示。生成的 main.js 中的 init 函数也如下所示。控制台日志如下所示。忽略 POST 错误，因为没有端点联系人。

我的问题是：在 Chrome 浏览器的开发者工具窗口中，网络选项卡的请求负载是：

{"name":"John Doe"}

需要对主干模型对象进行哪些更改才能使请求有效负载也包含包含的地址对象？谢谢。我希望有效载荷看起来像这样：

    {
    "name": "John Doe",
    "address": {
        "addressLine1": "Somewhere"
    }
}

从开发者工具窗口的控制台，我可以确认 addressLine1 在包含的地址对象中是“某处”：

    Inside Contact.initialize
address.js:14 Inside Address.initialize
contact.js:24 Inside Contact.getAddress
main.js:12 Hello from Backbone! name = John Doe addressLine1 = Somewhere
contact.js:21 Inside Contact.validate
main.js:22 return value from save [object Object]
jquery.js:8630 POST http://localhost:9001/contacts 404 (Not Found)
...
main.js:19 Error [object Object]

来自 main.js

 init: function () {
'use strict';
var myContact = new Test.Models.Contact();
console.log('Hello from Backbone! name = ' + myContact.get('name') + ' addressLine1 = ' + myContact.getAddress().get('addressLine1'));

var rv = myContact.save(null,{
                    success: function(response) {
                        console.log('Success ' + response);
                    },
                    error: function(response) {
                        console.log('Error ' + response);
                    }
                });
console.log ('return value from save ' + rv);

} };

来自contact.js

    /*global Test, Backbone*/
Test.Models = Test.Models || {};

(function () {
  'use strict';

  Test.Models.Contact = Backbone.Model.extend({

    url: '/contacts',

    initialize: function() {
        console.log ('Inside Contact.initialize');
        this.address=new Test.Models.Address();
    },

    defaults: {
        name: 'John Doe'
    },

    validate: function(attrs, options) {
        console.log ('Inside Contact.validate');
    },
    getAddress: function() {
        console.log ('Inside Contact.getAddress');
        return this.address;
    },
    parse: function(response, options)  {
        console.log ('Inside Contact.parse');
      return response;
    }
  });

})();

来自 address.js

    /*global Test, Backbone*/

Test = {}; // a global object 
Test.Models = Test.Models || {};

(function () {
  'use strict';

  Test.Models.Address = Backbone.Model.extend({

    url: '',

    initialize: function() {
        console.log ('Inside Address.initialize');
    },

    defaults: {
        addressLine1: 'Somewhere'
    },

    validate: function(attrs, options) {
        console.log ('Inside Address.validate');
    },

    parse: function(response, options)  {
        console.log ('Inside Address.parse');
      return response;
    }
  });

})();

当我在联系人验证函数处设置断点时调用堆栈：

    validate (contact.js:21)
_validate (backbone.js:568)
save (backbone.js:465)
init (main.js:14)
(anonymous) (main.js:29)
fire (jquery.js:3099)
fireWith (jquery.js:3211)
ready (jquery.js:3417)
completed (jquery.js:3433)

当上面的断点被触发时，我可以验证这个对象有地址信息：

    this
child {cid: "c1", attributes: {…}, _changing: false, _previousAttributes: {…}, changed: {…}, …}
address:child
attributes:{addressLine1: "Somewhere"}
changed:{}
cid:"c2"
_changing:false
_pending:false
_previousAttributes:{}
__proto__:Backbone.Model
attributes:{name: "John Doe"}
changed:{}
cid:"c1"
_changing:false
_pending:false
_previousAttributes:{}
__proto__:Backbone.Model

非常感谢。

Answer 1

我看到Nesting collection or models within another model

在将模型保存到 main.js 之前，我添加了以下代码行：

myContact.set('address', myContact.getAddress().toJSON());

然后我可以验证请求有效负载是我所期望的：

{"name":"John Doe","address":{"addressLine1":"Somewhere"}}

Thanks to Emile Bergeron 用于指出toJSON() 必须调用方法。

对我来说，骨干是裸露的骨头。判断一个对象可能包含其他对象并做必要的事情是不够聪明的。 javascript 程序员必须在适当的时候调用toJSON()。