Сохранение данных с обновленными значениями в Backbone.js

Question

Я работаю над приложением MVC с Backbone.js.

Предполагая, у меня есть представление о пользователях:-

var userDetailsView = Backbone.View.extend({
    model: userModel,
    el: "#userDteails",
    template: Handlebars.templtas.userDetails
    initialize: function () {
        this.model = new userModel();

        this.model.fetch({
            success: function (data) {
                this.render();
            }
        });
    },
    render: function () {
        $(this.el).html(this.template());
    },
    events: {
        "", "saveUserDetails" //event for save
    },
    saveUserDetails: function () {
        //How do I get the update value of FirstName??
    }
});

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

<div id="userDetails">
  <input type="text" value="{{FirstName}}" id="firstName"/>
 </div>

Пожалуйста, игнорируйте ошибки кода, так как это всего лишь фиктивный код, теперь, если мне нужно сохранить данные пользователя (например, для FirstName). Тогда как мне получить обновленное значение?

Должно ли это быть:-

saveUserDetails: function () {
        //How do I get the update value of FirstName??
        this.model.set("", $('#Firstname').val());
    }

или я должен следить за преобразованием данных формы в JSON и обновлять свой this.model т.е. создать мою разметку HTML с name отнести:-

<form>
    First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/>
</form>

и использовать функцию, предложенную Tobias Cohen

$.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;
};

и делать:-

$('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject()));
        return false;
    });

Я не эксперт в Backbone, но видел по крайней мере 10-15 образцов и учебных пособий, которые учат основы. Из тех, что я нашел выше, есть два способа сделать это.

Пожалуйста, дайте мне знать, как лучше поступить.

Answer 1

Оба пути в порядке! Это зависит от того, насколько сложным является ваше HTML <-> отображение модели. Если все можно сделать с помощью div/span/input с именем /data-name или чем-то еще, что плавает на вашей лодке, то сериализационный маршрут прост. Но как только вы вырастете из этого, вы, вероятно, посмотрите на более нестандартные способы, которые технически похожи на ваш первый вариант, с немного большей логикой, чем просто получение.val() из поля ввода.

Я не очень понимаю оба ваших примера обработки, но вы сказали не беспокоиться о деталях... так:) Для формы я предполагаю, что.text() только для целей отладки? Правильный код, скорее всего, сначала предотвратит использование Default() при отправке формы, а затем выполнит model.save($('form'). SerializeObject()), чтобы одновременно обновить модель и сохранить ее на сервере одновременно. С некоторым успехом / ошибкой обратный вызов добавлен для хорошей меры!