骨干-形式与条件字段(backbone-forms with conditional fields)

首先感谢的人的骨干，形成谁做了一个工具，它完美集成在Backbone.js的框架。

我使用Backbone.js的与骨干-形式的插件，但我需要有条件的领域。

比方说，我有以下表格。 我要显示（或不）与thext或根据在所选择的值一个textarea单个线路输入select 。

<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-形式实现它？

谢谢。

Answer 1:

您可以绑定事件到选择元素，并让他们切换其他表单元素的可见性。

试试这个：

$(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

Answer 2:

没有默认implementation.In事实上，完全靠你自己也很简单，请参考下面的代码：

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

文章来源: backbone-forms with conditional fields