Saving data with updated values in Backbone.js

Question

I am working on MVC application with Backbone.js.

Assuming, I have a View of User details:-

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

Now, in similar line I have a handlebar template which deals with edit details of User Model.

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

Please ignore the code mistakes as its just a dummy code, now if I need to save the user details(say for eg. FirstName). Then how do I get the updated value?

Should it be:-

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

or should I follow converting form data to JSON, and update my this.model i.e create my HTML markup with name attribute:-

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

and use the function suggested by 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;
};

and do :-

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

I am not an expert in Backbone, but have seen at-least 10-15 samples and tutorials which teach backbone. Out of those I found the above two way to do it.

Please let me know, what would be best way to proceed.

score 0 · Accepted Answer · answered Dec 01 '13 at 02:14

Both ways are OK! It depends on how complex your HTML <-> Model mapping is. If everything can be done with div/span/input with a name/data-name or whatever floats your boat, then the serializing route is straightforward. But once you grow out of that, you'll probably look at more custom ways, which is technically similar to your first option, with a bit more logic that just getting the .val() from the input field.

I don't really understand both of your example handling tho, but you said to not worry about the details... so :) For the form one, I assume that the .text() is just for debugging purpose? The correct code would probably first preventDefault() on the form submitting and then do a model.save($('form').serializeObject()) to both update the model and save it on the server at the same time. With some success/error call back thrown in for good measure!

Saving data with updated values in Backbone.js

1 Answers1