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?

Answer 1

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