javascript - 使用自定义布局和具有主干表单的可变字段数

Question

我正在开发一个正在使用 backbone-forms.js 的应用程序用于生成动态形式。因此，目前我们能够生成具有标签和输入元素的简单表单，如下所示

但实际上我必须更改字段的排列。在每一行中我将有一个标签，两个输入字段。

所以我想问是否可以使用主干表单动态生成这样的表单。如果我们将使用完全定制的模板，那么使用这个框架就没有意义了。那么是否可以只为一行提供 html，并根据同一模板生成其他行。

如果可以生成这样的表单，我们将如何设置它们的值，例如字段名、id、类等。到第三个字段。

请提出建议。

Answer 1

是的，这是可能的，因为 powmedia 的 backbone-forms 确实提供了模板选项。

您只需构造模板，并将其作为选项传递给它。

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>

在这里试试 http://jsfiddle.net/xxhLxr7z/1/ :)