具有条件字段的主干形式 [英] backbone-forms with conditional fields

问题描述

首先感谢 backbone-forms 的人，他们制作了一个完美集成的工具在backbone.js 框架中.

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

假设我有以下表格.我想根据 select 中选择的值显示(或不显示)带有 xt 或 textarea 的单行输入.

<选择><option value="" selected="selected">选择一个</option><option value="1" >line</option><option value="2" >area</option></选择><input id="element_1"/><textarea id="element_2" ></textarea></表单>

像这样的行为是在主干中默认实现的吗?

如果没有，我该如何使用 javascript 和 backone-forms 来实现它?

谢谢.

解决方案

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

试试这个:

$(function() {//表格var form = new Backbone.Form({架构:{inputType: { type: 'Select', options: ['line', 'area'] },行:'文本'，区域:'文本区域'}}).使成为();form.fields['area'].$el.hide();form.on('inputType:change', function(form, editor) {form.fields['line'].$el.toggle();form.fields['area'].$el.toggle();});//添加到页面$('body').append(form.el);});

这是一些实时代码:http://jsfiddle.net/shioyama/grn6y/

源自:https://groups.google.com/d/topic/backbone-forms/X5eVdTZWluQ/讨论

First of all thanks to the guys of backbone-forms who made a tool which perfectly integrates in the backbone.js framework.

I'm using backbone.js with the backbone-forms plugin, but I need to make conditional fields.

Let's say I've the following form. I want to show (or not) a single line input with thext or a textarea according to the value selected in the 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> 

A behaviour like this one is implemented by default in backbone?

If not, how can I implement it with javascript and backone-forms?

thanks.

解决方案

You can bind events to the select element and have them toggle the visibility of other form elements.

Try this:

$(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);
});

Here's some live code: http://jsfiddle.net/shioyama/grn6y/

Derived from this: https://groups.google.com/d/topic/backbone-forms/X5eVdTZWluQ/discussion

这篇关于具有条件字段的主干形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！