Сериализовать ввод форм в JSON с использованием Backbone.js

Я работаю над RESTful-приложением - я использую Java на стороне сервера и Backbone для Front End. 2 будет связываться через JSON.

Мое приложение имеет несколько форм, и я хотел бы:

  • Сериализовать ввод форм в JSON
  • Отправьте JSON на сервер

Мои вопросы:

  • Каков наилучший способ сериализации ввода форм в JSON? Возможно, только решение для базовой линии?
  • Как только форма вводит сериализован в объекты JavaScript - какой лучший способ отправить JSON на сервер?

Мой код:

Javascript и Backbone

$(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, так что извините, если это тривиально.

Я заинтересован в том, чтобы максимально эффективно использовать мое приложение, поэтому, пожалуйста, не стесняйтесь сказать мне, есть ли лучший способ сделать это.

Большое спасибо.

Ответы

Ответ 2

Каков наилучший способ сериализации ввода форм в JSON? Возможно, Только базовое решение?

Используйте 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 в своей модели и вызвать метод сохранения.

Ответ 3

Магистраль не делает никаких предположений о том, как вы реализуете поведение. Он обеспечивает только чистый архитектурный рисунок. Таким образом, способ, которым вы реализовали сериализацию формы, кажется прекрасным (аналогично или адаптирован из: Преобразовать данные формы в объект JavaScript с помощью 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);
}

Ответ 4

Другим решением было бы использовать расширение 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();
  }
});