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 回答