帶條件字段的骨幹形式

首先感謝backbone-forms的人，他們在backbone.js框架中完美地集成了一個工具。帶條件字段的骨幹形式

我使用backbone.js與backbone-forms插件，但我需要製作條件字段。

假設我有以下形式。我想根據在select中選擇的值顯示（或不）輸入帶有text或textarea的單行輸入。

<form method="post" action="">     
    <select > 
     <option value="" selected="selected">choose one</option> 
     <option value="1" >line</option> 
     <option value="2" >area</option> 
    </select> 
    <input id="element_1" /> 
    <textarea id="element_2" ></textarea> 
</form>

像這樣的行爲默認情況下在骨幹網中實現？

如果不是，我該如何使用javascript和backone-forms來實現它？

謝謝。

來源

2012-07-11 Daniele B

http://jsfiddle.net/evilcelery/c5QHr/ – 2013-03-04 15:18:13

沒有默認implementation.In事實上，完全靠你自己也很簡單，請參考下面的代碼：

//Pseudo code 
var line = $("element_1"),area = $("element_2"); 
if(selectvalue ==="1"){ 
    line.show(); 
    area.hide(); 
} 
else{ 
    line.hide(); 
    area.show(); 
}

來源

2012-07-11 13:56:58

非常感謝您回答。 +1！。不過，我想知道是否有方法將腳本包含在骨幹模型/方案中？ – 2012-07-11 14:09:30

您可以綁定事件到選擇元素，並讓他們切換的知名度其他表單元素。

試試這個：

$(function() { 

    //The form 
    var form = new Backbone.Form({ 
     schema: { 
      inputType: { type: 'Select', options: ['line', 'area'] }, 
      line: 'Text', 
      area: 'TextArea' 
     } 
    }).render(); 

    form.fields['area'].$el.hide(); 

    form.on('inputType:change', function(form, editor) {   
     form.fields['line'].$el.toggle(); 
     form.fields['area'].$el.toggle(); 
    }); 

    //Add it to the page 
    $('body').append(form.el); 
});

下面是一些現場代碼：http://jsfiddle.net/shioyama/grn6y/

源於此：https://groups.google.com/d/topic/backbone-forms/X5eVdTZWluQ/discussion

來源

2012-07-29 22:32:44

我更新了此答案中鏈接的jsfiddle以使用rawgit.com而不是raw.github.com - 這提供了正確的MIME類型，因此瀏覽器將運行我們要加載的JS。 http://jsfiddle.net/grn6y/43/ – 2014-09-04 20:49:43

帶條件字段的骨幹形式

回答

相關問題