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

Question

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

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

哟骨干：模特联系

哟骨干：模型地址

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

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

{"name":"John Doe"}

骨干模型对象需要进行哪些更改，以便请求有效负载也包含地址对象？谢谢。我希望有效负载看起来像这样：

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

在Developer Tools窗口的控制台中，我可以确认addressLine1在包含的地址对象中是'Somewhere'：

    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()。