Question

我有一个模板：

<script id="segment-instructions" type="text/html">
    <div data-bind="foreach: Conjunctions">
        <!-- Deep hierarchy -->
            <p data-bind="visible: !$root.hasAnyValidExpression($data)" />             
    </div>
</script>

我使用它的以下标记：

<div class="tab-content" id="options-tabs">
    ...
    <div data-bind="template: { name: 'segment-instructions', data: Instructions }"></div>
</div>

这是我应用绑定的方式：

var instructionsModel = new SegmentInstructionsModel();
...

ko.applyBindings({
    GeneralOptions: generalOptionsModel,
    Instructions: instructionsModel
}, $('#options-tabs').get(0));

问题是模板中的$root被解析为传递给ko.applyBindings的对象（即具有GeneralOptions和Instructions属性的对象），而不是对象在template绑定中指定，这是我的SegmentInstructionsModel类的实例。

我至少可以通过两种方式解决这个问题，我不喜欢这两种方式：

继续在模板中使用$root，但遍历到模板呈现的实际视图模型
```
<p data-bind="visible: !$root.Instructions.hasAnyValidExpression($data)" />
```
我不喜欢这样，因为模板不应该担心实际视图模型上面的对象是如何构建的。
使用$parents数组
```
<p data-bind="visible: !$parents[$parents.length - 2].hasAnyValidExpression($data)" />
```
由于显而易见的原因，我不喜欢这个（例如，一旦将实际模板的视图模型传递给ko.applyBinding，它就会停止工作）

有没有办法在模板中继续使用$root而不担心模板与其消费者向其提供数据的方式紧密耦合？

Answer 1

毕竟，使用$parents数组看起来像是要走的路，只能从底部而不是从顶部穿过（这是不可靠的，见上文）。也就是说，就我而言，它会像

<p data-bind="visible: !$parents[3].hasAnyValidExpression($data)" />

引用使用$ root传递给模板的数据

1 个答案: