带条件字段的骨干形式

首先感谢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

带条件字段的骨干形式

回答

相关问题