Question

我有这张桌子：

<div data-bind="with: viewModel">
<table class="displayTable">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Packs</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: productJson">
        <tr>
            <th data-bind="text: code"></th>
            <th data-bind="text: name"></th>
            <th>
                <table class="innerTable">
                    <thead>
                        <tr>
                            <td>Colour</td>
                            <td>MOQ</td>
                            <td>Volume</td>
                            <td>Price</td>
                            <td></td>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: packs">
                        <tr>
                            <td data-bind="text: color"></td>
                            <td data-bind="text: moq"></td>
                            <td data-bind="text: volume"></td>
                            <td data-bind="text: price"></td>
                            <td>
                                <button data-bind="click: $context.addProduct">Add</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </th>
        </tr>
    </tbody>
</table>
</div>

它有上下文：viewModel，然后有一个嵌入式foreach，它会更改内部所有内容的上下文，然后在foreach上下文中有一个嵌入式foreach ，再次改变背景。

我需要做的是从最嵌入的viewModel内访问foreach上下文，其中有一个按钮，其点击事件绑定到addProduct。

如何让addProduct重新加入viewModel上下文。 $parent不会这样做，$parents[2 or 1 or 0]也不会。

请参阅fiddle link

Answer 1

您正在使用视图模型属性中的函数，这会让KO感到困惑。

正确的解决方案是在自己的位置移出视图模型创建函数，并使用现在由视图模型函数创建的视图模型实例构建mainClass：

var ViewModelDefinition =  function () {
    //...
}

var mainClass = {
    viewModel: new ViewModelDefinition()
}

ko.applyBindings(mainClass);

并且在您看来需要使用$root.viewModel.addProduct引用您的处理程序，因为它可以在viewModel下找到：

 <button data-bind="click: $root.viewModel.addProduct">Add</button>

演示JSFiddle。

Knockout绑定深层次上下文

1 个答案: