带有条件字段的骨干形式

Question

首先要归功于骨干形式的人,他们制作了一个完美集成在backbone.js框架中的工具.

我正在使用backbone.js和backbone-forms插件,但我需要创建条件字段.

假设我有以下表格.我想根据在中选择的值显示(或不显示)带有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-forms实现它？

谢谢.

Answer 1

您可以将事件绑定到select元素,并让它们切换其他表单元素的可见性.

试试这个:

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

没有默认的实现。其实完全自己实现也很简单，请参考下面的代码\xef\xbc\x9a

\n\n

//Pseudo code \nvar line = $("element_1"),area = $("element_2");\nif(selectvalue ==="1"){\n  line.show();\n  area.hide();\n}\nelse{\n  line.hide();\n  area.show();\n}\n

\n