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

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!

machineghost · Answer 1 · 2013-04-26T21:06:18.513

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.

I got what you mean, but talking about an array, how can I get it and send to my PHP file? This can be one or many phones as if I was using checkboxes. — Bruno Almeida, Apr 26 '13 at 17:27
If you can get the array in as an attribute of one of your models, your model's `toJSON` should convert it in to valid JSON, which will get sent to your server (ie. your PHP code) if you use `save` and specify a `url` (or `urlRoot`) on your model. — machineghost, Apr 26 '13 at 21:05

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

1 Answers1