Backbone - How to this.model.save() an attribute with array? - arrays

Question

I have this model:
var Contact = Backbone.Model.extend({
defaults: function () {
return {
idc: ""
name: ""
email: "",
phones: new Array()
}
},
urlRoot: 'admin/contact'
});
This form (underscore template):
<form>
<input type="hidden" value="{{ idc }}" />
<p>
<label>Name:</label>
<input type="text" name="name" value="{{ name}}" />
</p>
<p>
<label>Email:</label>
<input type="text" name="email" value="{{ email }}" />
</p>
<p>
<label>Phones:</label>
<input type="text" name="phones[]" value="" />
<input type="text" name="phones[]" value="" />
<input type="text" name="phones[]" value="" />
</p>
<button class="cancel">Cancel</button><button class="save">Save</button>
</form>
And when I click in save, this function into Contact View:
e.preventDefault();
var formData = {},
prev = this.model.previousAttributes();
$(e.target).closest("form").find(":input").each(function () {
var el = $(this);
formData[el.attr("name")] = el.val();
});
this.model.set(formData);
this.model.save();
this.render();
I expect that when the function is called, it creates an array to send for the PHP file with the phones, so I can store it in the database. But looking at the browser console the attribute array is with the value: []
Is there something I´m missing to pass it to the PHP file?
PS: The array is in the formData array, but when I call this.model.save() looks like it lost the array.
Anyway, Thankyou!

Answer 1

Your problem is basically that you're using jQuery's serializeArray. serializeArray is great if you want to create a model for every form element, because it produces JSON like this (example JSON taken from the jQuery documentation):
[
{name: 'firstname', value: 'Hello'},
{name: 'lastname', value: 'World'},
{name: 'alias'}, // this one was empty
]
However, you don't want that, you want to create a single model from the combined elements; in other words you want:
{
firstname: 'Hello',
lastname: 'World',
alias: undefined
}
There are jQuery plug-ins that produce output like that if you want, but personally I'd recommend just writing your own. If you have a form view with an onSubmit handler, you could do something like:
this.model.set('name', this.$('[name="name"]').val());
this.model.set('email', this.$('[name="email"]').val());
// etc.
that's tailored specifically for your app and serializes the data the exact way you want.