从包含视图模型访问数据

Question

你知道它已经安静太久了，对吧？ ;-)

我有一个主视图模型。在视图内部，我使用 compose 绑定来加载一个子视图，就其显示的数据而言，该子视图是“独立的”。

<div data-bind="compose: articleSection"></div>

而“articleSection”只是一个包含字符串的可观察对象：

var articleSection = ko.observable('viewmodels/lt_articleRead');

...因为根据用户操作，我可能希望在该 div 中加载不同的视图/模型。

在我的主视图模型中，我还有一个可观察的“articleSelected”：

var articleSelected = ko.observable(true);

...从列表中选择文章时设置。

在我的子视图 (lt_ArticleRead) 中，我有两个可以显示的 div。如果 articleSelected 为假，则为一个，如果为真，则为一个：

<div id="articleSelected" data-bind="visible: articleSelected()">
...
</div>
<div id="articleNotSelected" data-bind="visible: articleSelected()">
     <p>Please select an article from the list on the left or create a new one</p>
</div>

我尝试使用“$root.articleSelected()”和“$parent.articleSelected”从主视图模型中访问 observable，但都不起作用。我是否必须“要求”子视图中的父视图模型才能正常工作？

Answer 1

您需要在撰写绑定上设置preserveContext:true。

<div data-bind="compose: { model: articleSection, preserveContext: true }"></div>

来自documentation（重点由我添加）：

每当组合发生时，都会围绕组合视图和视图模型创建一个独立的绑定上下文。因此，从该视图内部，您无法从外部访问其他模型对象。我们相信这对于封装非常重要，因为我们已经看到当您可以“意外”引用范围之外的事物时，会发生一些非常糟糕的架构事情。结果，默认情况下会封装事物。如果您愿意，您可以在绑定上设置 preserveContext:true 以将新组合“连接”到其父组合并启用从子组合内部向上遍历树，但这不是默认设置。