Using customized layouts and variable no of fields

问题:

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 element like this

But actually I have to change the arrangement of the fields.In each row I will be having one label,two input fields.

So I wanna ask is it possible to generate forms like this dynamically with backbone forms. Ifwe will use a full customized template then there is no meaning of using this framework. So is it possible to give html for only one row and generating other rows based on the same template.

If it is possible to generate form like this how we will be setting their values like fieldname id class e.t.c. to the third field.

Please suggesst.

回答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.

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

var Form = 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 = new Form({
    model: new FormSchema()
}).render();

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

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

        </table>
    </form>
</script>

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