使用自定义布局和变量没有与骨干形式的字段 [英] Using customized layouts and variable no of fields with backbone forms

问题描述

我的工作中，我使用的应用程序的骨干-forms.js 的生成动态表单。因此，在present我们能够产生具有这样的标签和输入元素简单的形式

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

但实际上我不得不改变每一行我将具有一个标签fields.In的布置中，两个输入域

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

所以我想问问有没有可能与骨干网的形式动态生成这样的形式。如果建了工厂将采用全定制的模板，那么就没有使用这个框架的意义。所以有可能得到的HTML为只有一行和基于同一模板产生其他的行。

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.

如果有可能产生的形式这样，我们将如何设置像字段名ID类e.t.c.他们的价值观到第三字段

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.

请suggesst。

推荐答案

是的，它是可能的，因为骨干表单按powmedia并提供模板选项。

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>

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

这篇关于使用自定义布局和变量没有与骨干形式的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！