1

我正在创建一个由多个子视图模型组成的向导。

一个视图模型（第 3 步）是此敲除表单的副本，由两个单选按钮组组成，其中第一组控制第二组中可用的选项。

在此子视图中使用时，我无法绑定单选按钮，虽然它作为独立的视图模型工作，但当用作子视图时，似乎self.availableDatabases永远不会调用 ko.computed 函数（或者换句话说，它似乎视图没有绑定到视图模型）。

select db 单选组绑定到子视图模型 availableDatabases ，代码如下：

<h1>Select OS:</h1>
<div data-bind="foreach: os" >
    <div>
        <input type="radio" name="os" data-bind="attr: {value: name}, checked: $root.selectedOs" />
        <span data-bind="text: name"></span>
    </div>    
</div>
<h1>Select DB:</h1>
<div data-bind="foreach: availableDatabases" >
    <div>
        <input type="radio" name="db" data-bind="attr: {value: name}, checked: $root.selectedDb" />
        <span data-bind="text: name"></span>
    </div>    
</div>

整个向导代码的小提琴在这里，任何想法我在与子视图模型的集成中做错了什么？

4

1 回答 1

3

您需要使用$parent而不是$root.

在您的情况下，$root引用您的主视图模型您在 applyBindings 调用中传递的内容，但ViewModel您的.selectedOsselectedDbConfigureModel

因此，您需要$parent在 foreach 中使用“上一层”来访问您的属性（或者您可以使用$root.configureModel().selectedOs一直到顶部并下一层到您的configureModel）

<h1>Select OS:</h1>
<div data-bind="foreach: os" >
    <div>
        <input type="radio" name="os" data-bind="attr: {value: name}, 
               checked: $parent.selectedOs" />
        <span data-bind="text: name"></span>
    </div>    
</div>
<h1>Select DB:</h1>
<div data-bind="foreach: availableDatabases" >
    <div>
        <input type="radio" name="db" data-bind="attr: {value: name}, 
               checked: $parent.selectedDb" />
        <span data-bind="text: name"></span>
    </div>    
</div>

演示JSFiddle。

您可以在文档中阅读有关这些绑定上下文属性的信息。

于 2013-07-17T19:16:59.083 回答