0

動的フォームを生成するためにbackbone-forms.jsを使用しているアプリケーションに取り組んでいます。したがって、現在、このようなラベルと入力要素を持つ単純なフォームを生成できます

ここに画像の説明を入力

しかし、実際にはフィールドの配置を変更する必要があります。各行には、1 つのラベルと 2 つの入力フィールドがあります。

ここに画像の説明を入力

このようなフォームをバックボーン フォームで動的に生成することは可能ですか。完全にカスタマイズされたテンプレートを使用する場合、このフレームワークを使用する意味はありません。したがって、1行のみにhtmlを提供し、同じテンプレートに基づいて他の行を生成することは可能ですか?

このようなフォームを生成できる場合、フィールド名、ID、クラスなどの値を 3 番目のフィールドに設定する方法を説明します。

提案してください。

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 に答える