0

我正在开发一个应用程序，在该应用程序中我使用主干表单.js来生成动态表单。所以目前我们能够生成具有标签和输入元素的简单表单，如下所示

在此处输入图像描述

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

在此处输入图像描述

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

如果可以生成这样的表单，我们将如何将它们的值（如 fieldname id class 等）设置为第三个字段。

请建议。

4

1 回答 1

3

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

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

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/ :)

于 2015-01-08T06:49:36.387 回答