0

私が作成したいのは、ラジオボタンのペア（「親」）での選択によって値が決定される選択要素です。

<p>
How many dimensions? 
<input type="radio" name="dimension" value="2D" data-bind="checked: dimSelect" />2D
<input type="radio" name="dimension" value="3D" data-bind="checked: dimSelect" />3D
</p>
<p data-bind="text: dimSelect"></p>
<p data-bind="visible: dimSelect">
Which geometry? <select data-bind="options: geometry, optionsCaption: 'Choose'"></select>
</p>

私のビューモデルは次のとおりです。

<script type="text/javascript">
function viewModel(){
    dimSelect = ko.observable();
    if (dimSelect() == '2D') {
        alert('2D: ' + dimSelect());
        geometrie = ko.observableArray(['Circle', 'Quadrant', 'Triangle']);
    } else {
        alert('3D: ' + dimSelect());
        geometrie = ko.observableArray(['Cilinder', 'Cube', 'Widge']);
    };
}
ko.applyBindings(new viewModel());
</script>

しかし、何らかの理由で、テキスト バインダーで表される dimSelect 値を取得できますが、viewModel の if ステートメントでは取得できません。定義されていません (したがって、3D が適用されます)。私はおそらく、理論的なアプローチ全体のように、初心者向けのことを間違っているので、できるだけ実用的/理解しやすい答えにしてください。

お時間をいただきありがとうございます。

4

1 に答える 1

1

これにアプローチする方法はいくつかあります。

現在のコードでは、作成しているオブジェクトの新しいインスタンスにグローバル変数をアタッチするのではなく、コンストラクター関数でいくつかのグローバル変数を作成しています ( this)。

これを行う別の方法を次に示します。

<p>
How many dimensions? 
<input type="radio" name="dimension" value="2D" data-bind="checked: dimSelect" />2D
<input type="radio" name="dimension" value="3D" data-bind="checked: dimSelect" />3D
</p>
<p data-bind="text: dimSelect"></p>
<p data-bind="with: dimSelect">
    Which geometry? <select data-bind="options: $root.dimensions[$data], optionsCaption: 'Choose'"></select>
</p>

js:

function ViewModel() {
    this.dimSelect = ko.observable();
    this.dimensions = {
        '2D': ['Circle', 'Quadrant', 'Triangle'],
        '3D': ['Cilinder', 'Cube', 'Widge']         
    };
}
ko.applyBindings(new ViewModel());

サンプル: http://jsfiddle.net/rniemeyer/dvxdR/

于 2012-05-07T17:42:28.540 に答える