javascript 使用 Backbone.js 将表单输入序列化为 JSON
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14554111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Serialize form inputs to JSON using Backbone.js
提问by John
I'm working on RESTful application - I'm using Java on the server side and Backbone for the Front End. The 2 will communicate via JSON.
我正在开发 RESTful 应用程序 - 我在服务器端使用 Java，在前端使用 Backbone。2 将通过 JSON 进行通信。
My App has quite a few forms and I would like to:
我的应用程序有很多形式，我想：
- Serialize the form inputs to JSON
- Send the JSON to the server
- 将表单输入序列化为 JSON
- 将 JSON 发送到服务器
My questions:
我的问题：
- What is the best way to serialize the form inputs to JSON? Perhaps a Backbone only solution?
- Once the form inputs serialized to JavaScript Objects - what is the best way to send JSON to the server?
- 将表单输入序列化为 JSON 的最佳方法是什么？也许只有 Backbone 的解决方案？
- 一旦表单输入序列化为 JavaScript 对象 - 将 JSON 发送到服务器的最佳方式是什么？
My code so far:
到目前为止我的代码：
Javascript and Backbone
Javascript 和主干
$(function(){
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
//Model
var SignupForm = Backbone.Model.extend();
//View
var SignupView = Backbone.View.extend({
el: '.signupForm',
events: {
'click input.submit': 'getStatus'
},
getStatus: function(event){
var data = JSON.stringify($('form').serializeObject());
$('.test').html(data);
return false;
}
});
var signupForm = new SignupForm();
var signupView = new SignupView({
model: signupForm
});
});
HTML
HTML
<div class="signupForm">
<form class"signup">
<label for="name" >Name:</label>
<input type="text" id="name" name="name" />
<label for="surname" >Surname:</label>
<input type="text" id="surname" name="surname" />
<input type="submit" value="submit" class="submit" />
</form>
<div class="test"></div>
</div>
I'm new to Backbone so sorry if this is trivial.
我是 Backbone 的新手，如果这是微不足道的，我很抱歉。
I'm keen to code my application the best way as possible so please feel free to tell me if there is a better way to do this.
我很想尽可能以最好的方式编写我的应用程序，所以请随时告诉我是否有更好的方法来做到这一点。
Thanks a lot.
非常感谢。
回答by MCB
For just serializing to JSON there's this option as well
对于仅序列化为 JSON 也有此选项
回答by inf3rno
What is the best way to serialize the form inputs to JSON? Perhaps a Backbone only solution?
将表单输入序列化为 JSON 的最佳方法是什么？也许只有 Backbone 的解决方案？
Use Backbone.Formsto read the form data into a Model.
使用Backbone.Forms将表单数据读入模型。
For example:
例如：
var User = Backbone.Model.extend({
schema: {
title: { type: 'Select', options: ['Mr', 'Mrs', 'Ms'] },
name: 'Text',
email: { validators: ['required', 'email'] },
birthday: 'Date',
password: 'Password',
address: { type: 'NestedModel', model: Address },
notes: { type: 'List', listType: 'Text' }
}
});
var user = new User();
var form = new Backbone.Form({
model: user
}).render();
$('body').append(form.el);
Once the form inputs serialized to JavaScript Objects - what is the best way to send JSON to the server?
一旦表单输入序列化为 JavaScript 对象 - 将 JSON 发送到服务器的最佳方式是什么？
After that you can sync your model with your REST service. You have to set an url property on your model, and call the save method.
之后，您可以将模型与 REST 服务同步。您必须在模型上设置 url 属性，并调用 save 方法。
回答by Prisoner
Another solution would to be to use the backbone.syphonextension, it allows you to simply submit your form in the same way as an entity would create it:
另一种解决方案是使用backbone.syphon扩展名，它允许您以与实体创建表单相同的方式简单地提交表单：
Backbone.View.extend({
events: {
"submit form": "formSubmitted"
},
formSubmitted: function(e){
e.preventDefault();
var data = Backbone.Syphon.serialize(this);
this.model.set(data);
this.model.save();
}
});
回答by Aditya Manohar
Backbone doesn't make any assumptions of how you implement behavior. It only provides a clean architectural pattern. So the way you have implemented form serialization seems to be fine (similar to or adapted from: Convert form data to JavaScript object with jQuery)
Backbone 不会对您如何实现行为做出任何假设。它只提供了一个干净的架构模式。所以你实现表单序列化的方式似乎很好（类似于或改编自：Convert form data to JavaScript object with jQuery）
As far as persistence is concerned, you can set the model's attributes when the submit button is clicked.
就持久性而言，您可以在单击提交按钮时设置模型的属性。
In your view:
在您看来：
getStatus: function(event){
var data = JSON.stringify($('form').serializeObject());
this.model.set(data);
}
and in your model:
并在您的模型中：
initialize: function(){
//This will save attributes every time a change event is triggered.
this.bind("change", this.save);
}
