我有一个与包含的backbonejs模型对象有关的问题。使用https://github.com/yeoman/generator-backbone上描述的yeoman骨干发电机,我创建了一个骨干应用程序,以测试包含另一个模型对象的模型对象是如何将JSON发送到后端服务器的。
我在此测试应用程序中添加了两个模型联系和地址。
yo骨干:型号触点
哟骨干:型号地址
联系对象包含一个地址对象。接触和地址骨干模型对象如下所示。生成的main.js中的init函数也如下所示。控制台日志如下所示。由于没有端点联系人,因此请忽略帖子错误。
我的问题是:在Chrome浏览器开发人员工具窗口中,网络选项卡请求有效载荷是:
{"name":"John Doe"}
骨干模型对象需要哪些更改,以便请求有效负载也具有包含的地址对象?谢谢。我希望有效载荷看起来像这样:
{
"name": "John Doe",
"address": {
"addressLine1": "Somewhere"
}
}
来自"开发人员工具"窗口中的控制台,我可以在包含的地址对象中确认地址线1是"某个地方":
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
非常感谢。
我在另一个模型中看到了嵌套收集或模型
我在将模型保存在main.js:
中之前添加了以下代码行myContact.set('address', myContact.getAddress().toJSON());
然后我可以验证请求有效载荷是我期望的:
{"name":"John Doe","address":{"addressLine1":"Somewhere"}}
感谢Emile Bergeron指出的toJSON()
方法必须调用。
对我来说,骨干是裸露的骨头。它不够聪明,无法找出一个对象可能包含其他对象并做需要的对象。JavaScript程序员必须在适当的时间致电toJSON()
。