Using Customized Layouts And Variable No Of Fields With Backbone Forms

I am working on an application in which I am using backbone-forms.js for generating dynamic forms. So at present we are able to generate simple forms having a label and input eleme

Solution 1:

Yes it is possible since the backbone-forms by powmedia does provide the template options.

You just have to construct the template, and pass to it as option.

varFormSchema = Backbone.Model.extend({
   defaults: function() {
      return {
       'cidesc': 'abc',
        'cimisc': 3555,
        'codesc': 'asdf',
        'comisc': 123,
        'todesc': 'def',
        'tomisc': 1233,
      };
    },
});

varForm = Backbone.Form.extend({
    template: _.template($('#formTemplate').html()),

    schema: {
       'cidesc': { type: 'Text', title: '' },
        'cimisc': { type: 'Text', title: '' },
        'codesc': { type: 'Text', title: '' },
        'comisc': { type: 'Text', title: '' },
        'todesc': { type: 'Text', title: '' },
        'tomisc': { type: 'Text', title: '' },
    }
});

var form = newForm({
    model: newFormSchema()
}).render();

$('body').append(form.el);

<scriptid="formTemplate"type="text/html"><form><table><tbody><tr><td>Buffer check-in time</td><td><divdata-fields="cidesc"></div></td><td><divdata-fields="cimisc"></div></td></tr><tr><td>Buffer check-out time</td><td><divdata-fields="codesc"></div></td><td><divdata-fields="comisc"></div></td></tr><tr><td>Buffer check-out time</td><td><divdata-fields="todesc"></div></td><td><divdata-fields="tomisc"></div></td></tr></tbody></table></form></script>

try it here http://jsfiddle.net/xxhLxr7z/1/ :)