javascript - 使用 Backbone.js 将表单输入序列化为 JSON

Question

我正在开发 RESTful 应用程序——我在服务器端使用 Java，在前端使用 Backbone。2 将通过 JSON 进行通信。

我的应用程序有很多表格，我想：

1. 将表单输入序列化为 JSON
2. 将 JSON 发送到服务器

我的问题：

1. 将表单输入序列化为 JSON 的最佳方法是什么？也许只有 Backbone 的解决方案？
2. 一旦表单输入序列化为 JavaScript 对象 - 将 JSON 发送到服务器的最佳方式是什么？

到目前为止我的代码：

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

<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>

如果这是微不足道的，我是 Backbone 的新手，很抱歉。

我很想尽可能以最好的方式编写我的应用程序，所以请随时告诉我是否有更好的方法来做到这一点。

非常感谢。

Answer 1

仅序列化为 JSON 也有此选项

https://github.com/marioizquierdo/jquery.serializeJSON

Answer 2

将表单输入序列化为 JSON 的最佳方法是什么？也许只有 Backbone 的解决方案？

使用Backbone.Forms将表单数据读入模型。

例如：

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);

一旦表单输入序列化为 JavaScript 对象 - 将 JSON 发送到服务器的最佳方式是什么？

之后，您可以将模型与 REST 服务同步。你必须在你的模型上设置一个 url 属性，然后调用 save 方法。

Answer 3

另一种解决方案是使用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();
  }
});

Answer 4

Backbone 不对您如何实现行为做出任何假设。它只提供了一个干净的架构模式。所以你实现表单序列化的方式似乎很好（类似于或改编自：Convert form data to JavaScript object with jQuery）

就持久性而言，您可以在单击提交按钮时设置模型的属性。

在您看来：

getStatus: function(event){
            var data = JSON.stringify($('form').serializeObject());
            this.model.set(data);

 }

在你的模型中：

initialize: function(){
   //This will save attributes every time a change event is triggered.
   this.bind("change", this.save);
}