6

まず、backbone.js フレームワークに完全に統合するツールを作成したbackbone-formsの人たちに感謝します。

backbone-forms プラグインで backbone.js を使用していますが、条件付きフィールドを作成する必要があります。

次のフォームがあるとしましょう。で選択した値に応じて、thext または textarea を使用して 1 行の入力を表示する (または表示しない) 必要があります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 でどのように実装できますか?

ありがとう。

4

2 に答える 2

7

イベントを 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

于 2012-07-29T22:32:44.233 に答える
2

デフォルトの実装はありません。実際、完全に独自のものも非常に簡単です。次のコードを参照してください：</p> 

//Pseudo code 
var line = $("element_1"),area = $("element_2");
if(selectvalue ==="1"){
  line.show();
  area.hide();
}
else{
  line.hide();
  area.show();
}
于 2012-07-11T13:56:58.443 に答える