2015-01-07 9 views
0

Я работаю над приложением, в котором я использую backbone-forms.js для создания динамических форм. Таким образом, в настоящее время мы способны генерировать простые формы, имеющие элемент этикетки и вход как этотИспользование настраиваемых макетов и переменных без полей с базовыми формами

enter image description here

Но на самом деле я должен изменить расположение fields.In каждая строка I будет иметь одну метку, два поля ввода.

enter image description here

Так что я хочу спросить можно ли генерировать формы, как это динамически с магистральным формами. Если мы будем использовать полный настраиваемый шаблон, тогда нет смысла использовать эту инфраструктуру. Так можно дать html только для одной строки и генерировать другие строки на основе одного и того же шаблона.

Если возможно сформировать форму следующим образом, как мы будем устанавливать их значения, такие как fieldname id class e.t.c. к третьему полю.

Прошу предложить.

+0

Вы смотрели в создание пользовательского редактора (см документы)? Вы также можете расширить объект Field, чтобы создать свой собственный шаблон. – evilcelery

+0

@evilcelery Ya Я посмотрел на него, но это было немного запутанно для меня. –

ответ

3

Да, это возможно, так какот 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/ :)