Ember save form in ajax call - ajax

Question

I have my edit form with all of my information load in it, and when I click on the save button, it take all of field to save even if there is nothing changed in it..
I wanted to get back in an object only the index and their value that I modified in the form.
I have stricly no idea how I can do this with Ember.
Here is my code :
App.EnquiryUpdateController = Ember.ObjectController.extend({
id: null,
isSaved: false,
actions: {
save: function() {
var enquiry = this.get('model');
console.log(enquiry);
var obj = JSON.parse(JSON.stringify(enquiry));
obj = this.cleanObject(obj);
$.ajax({
url: host + 'mdf/enquiry/' + enquiry.id,
type: 'POST',
accepts: 'application/json',
data: obj
});
this.transitionToRoute('enquiry', enquiry)
}
},
});
My Route:
App.EnquiryUpdateRoute = Ember.Route.extend({
model: function() {
return this.modelFor('enquiry');
}
});
And my Template :
<script type="text/x-handlebars" data-template-name="enquiry/update">
<div class="enquiry-update">
{{#if isSaved}}
<div class="saved">Enquiry updated successfully</div>
{{/if}}
<div>
<label>Customer Name</label>
{{input value=customerName}}
</div>
<div>
<label>Customer Email</label>
{{input value=customerEmail}}
</div>
<div>
<label>Customer Phone</label>
{{input value=customerPhone}}
</div>
<div>
<button {{action "save"}}>Save</button>
</div>
</div>
</script>
If I update the customerName, I only want to have it in my object { customerName: "toto" } instead of all of them..
Thanks !

Answer 1

Well, the concept you're going to want to implement will be dirty attribute checking. This means you'll need to keep a copy of the original data and then either mark an attribute as dirty, or compare attributes and only send the different attributes.