Inline fields in BackboneForms

Question

I am using BackboneForms and I want the fields passed in fieldsets to be inline in the some row. (Using bootstrap3)

for example:

form = new Form({
    fieldsets:[
        {legend:'PART1', fields:['title', 'content', 'email']},
        {legend:'PART2', fields:['country', 'sport']}
    ]
});

I want the inputs in PART1 in the same row. (col-sm-4 for each one), col-sm-6 for the PART2 inputs and so on for any object in fieldsets.

Code in JsFiddle.

How can I do this ?

Answer 1

As per the docs : https://github.com/powmedia/backbone-forms#customising-templates

Custom Forms

<script id="formTemplate" type="text/html">
    <form>
        <h1><%= heading1 %></h1>

        <h2>Name</h2>
        <div data-editors="firstName"><!-- firstName editor will be added here --></div>
        <div data-editors="lastName"><!-- lastName editor will be added here --></div>

        <h2>Password</h2>
        <div data-editors="password">
            <div class="notes">Must be at least 7 characters:</div>
            <!-- password editor will be added here -->
        </div>
    </form>
</script>

Javascript

 var form = new Backbone.Form({
    template: _.template($('#formTpl').html()),
    model: new UserModel(), //defined elsewhere
    templateData: {heading1: 'Edit profile'}
});

Placeholders are the data-xxx attributes, e.g. data-fieldsets, data-fields and data-editors.

https://github.com/powmedia/backbone-forms#alternate-field-templates