2015-01-07 19 views
0

我正在使用backbone-forms.js生成動態表單的應用程序。所以,目前我們能夠產生具有這樣使用自定義佈局和主幹形式的字段變量號

enter image description here

標籤和輸入元素簡單的形式,但實際上我不得不改變fields.In的安排每一行,我將是具有一個標籤,二輸入字段。

enter image description here

所以我想問問是否有可能與骨幹形式動態生成這樣的形式。如果我們將使用完整的自定義模板,那麼使用此框架沒有意義。那麼是否有可能僅爲一行提供html,並基於相同的模板生成其他行。

如果可以像這樣生成表單,我們將如何設置它們的值,如fieldname id class e.t.c.到第三個領域。

請指教。

+0

你看着創建一個自定義編輯器(見文檔)?您還可以擴展Field對象以創建自己的模板。 – evilcelery

+0

@evilcelery雅我看着它,但它有點讓我困惑。 –

回答

3

是的,因爲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/ :)