Create JSON representation of complex form with nested objects and update backbone model

Question

I have the following backbone model

var Page = Backbone.Model.extend({
    defaults: {
        id: null,
        metadata: {
            name: '',
            title: '',
            ...
        },
        children: []
        parent: null
    },
    urlRoot: '/api/page',
    initialize: function () {}
});

When I save the following form I need to create a JSON representation of this form and update the backbone model before saving it to the server. I need to do this because my form is dynamically created so I can not have hard coded selectors for looking for form names. Below is an example form.

<form>
    <label>Name:</label>
    <input type="text" name="metadata.name" value="">
    <label>Title:</label>
    <input type="text" name="metadata.title" value="">
    <label>Slug:</label>
    <input type="text" name="metadata.slug" value="">
    <label>Url:</label>
    <input type="text" name="metadata.url" value="">
    <button type="submit">Save</button>
</form>

What is the most efficient way of updating a backbone model based on HTML form data?

Edit

I found this answer here at stackoverflow, using square brackets instead of dots between objects. I think this technique works pretty good but maybe there are a similar way to serialize a form using dot notation?

Have you tried serializing the form as a whole? For instance, `var form= $('form')[0]; var data = JSON.stringify(form.serializeArray());` — Dennis Rongo, Mar 29 '13 at 18:44
@DennisRongo Yes, the result does not match my backbone model, the result looks like this: [{"name":"metadata.name","value":"lorem"},{"name":"metadata.title","value":"My title"},{"name":"metadata.description","value":""},{"name":"metadata.slug","value":"foo"},{"name":"metadata.url","value":"foo"},{"name":"metadata.published","value":"0001-01-01T00:00:00"}] — marcus, Mar 29 '13 at 18:53
When you say 'dynamic form', do you mean your field names changes every time? What's dynamic about it? You can do a selector even for dynamic elements. — Dennis Rongo, Mar 29 '13 at 19:25
@DennisRongo yes, the field names changes and the amount of fields changes based on the server side rendering — marcus, Mar 29 '13 at 19:28

score 2 · Accepted Answer · answered Mar 29 '13 at 21:35

2

I ended up using this neat little library for converting my form to a JavaScript object

answered Mar 29 '13 at 21:35

marcus

9,616
9
58
108

score -1 · Answer 2 · answered Mar 29 '13 at 19:43

Having an idea what you have in mind, I'd just remove the Model defaults and leave the fields that's always there (or remove it period). Those fields are unknown at this point so setting defaults is not ideal in your case scenario. Technically speaking, the Model can just be updated to any field(s) that you want it to be and will adapt to whatever fields you feed it from the server.

The crucial stage is setting the Model initially since this dictates what attributes are contained within the Model. Since you mentioned that the form is created dynamically, you can create the Model via the JSON object that represents the data that goes along with the form you're rendering.

When it's time to save it back to the server, your Model will have all the attributes it needs to do the update. That's the first way.

model.save();

Or you can serialize the Form as a whole when it's time to save the changes. Basically, create a new Model at run-time.

var form= $('#myForm'); 
var data = JSON.stringify(form.serializeArray());

/**Create a new instance of the Model then and perform an update. */
var model = new MyModel(data);
model.save();

Create JSON representation of complex form with nested objects and update backbone model

2 Answers2