当视图模型用作子视图模型向导样式对话框时，淘汰 foreach 绑定不起作用

Question

我正在创建一个包含多个子视图模型的向导。

一个view-model (step 3) is a copy of this knockout form and consists of two radio button groups，其中第一组控制第二组中可用的选项。

在此子视图中使用时，我无法绑定单选按钮，虽然它作为独立的视图模型工作，但在用作子视图时，似乎永远不会调用 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>

The fiddle for the entire wizard code is here，您知道我在与子视图模型的集成中做错了什么吗？

Answer 1

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

$root 引用您的主视图模型，您在您的案例 ViewModel 中通过 applyBindings 调用，但您的 ConfigureModel 上具有 selectedOs 和 selectedDb 属性。

因此，您需要在 foreach 中使用 $parent“上一层”来访问您的属性（或者您可以使用 $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.

您可以在documentation 中了解这些绑定上下文属性。