How to serialize only changed form attributes to JSON

Question

I'm currently using Backbone in my client-side web application. When I render a view, I use a template to get the values of my model into the view. Currently, when I click the save button, I serialize my entire form content to JSON with a plugin called jsonify (https://github.com/kushalpandya/JSONify). (Maybe you could also do this with serializeArray(), but that's not the problem here)

Now I realized that I might have the problem of overwriting data while users are editing data simultaneously. Therefore, I want to only send data to the server if it has actually changed. I found out this was possible with model.save(data, {patch: true});

But I still need to find out which form elements have changed. I found a few methods to do that with events or serializing before/after, but what I look for would be a way to combine serializing and getting changed attributes.

Is there any plugin that allows me to only serialize attributes that have changed in my form and leave out the ones that didn't change? (The serializing plugins I found until now only serialize the whole form).

If there is not, what is the easiest way to track which elements of my form have changed. And how can I serialize only these attributes?

Rida BENHAMMANE Rida BENHAMMANE · Accepted Answer · 2014-03-05T10:20:06

You can track changes in your form with events like this :

var MyView ...
    events: {
        'change input': 'inputChanged'
    },

    inputChanged: function(event) {
        this.data || (this.data = {});
        this.data[event.currentTarget.id] = event.currentTarget.value;
    }
    ...

How to serialize only changed form attributes to JSON

1 Answers