如何从 .compulated() 可观察对象内部使用淘汰赛的 $parent/$root 伪变量？

Question

在 knockout.js 绑定表达式中，我可以使用 $data、$parent 和 $root 伪变量。当我使用 ko.compulated observable 时，如何获得这些伪变量的等价物在 JavaScript 中声明？

我有一个带有子集合的父视图模型，并且父视图模型有一个 selectedChild observable。鉴于此，我可以使用数据绑定表达式将 CSS 类添加到当前选择的子级：

<ul data-bind="foreach: children">
    <li data-bind="text: name,
                   css: {selected: $data === $root.selectedChild()},
                   click: $root.selectChild"></li>
</ul>
<script>
vm = {
    selectedChild: ko.observable(),
    children: [{name: 'Bob'}, {name: 'Ned'}],
    selectChild: function(child) { vm.selectedChild(child); }
};
ko.applyBindings(vm);
</script>

但是我的视图模型将变得更加复杂，我想“我被选中了吗？”能够做的不仅仅是向单个元素添加单个 CSS 类。我真的想在子视图模型上创建一个 isSelected 计算属性，这样我就可以添加依赖于它的其他计算属性。

我尝试过只编写引用 $data 和 $root 的 JavaScript，因为淘汰可能会定义这些变量，并以某种方式让它们在作用域内。调用我的计算评估器函数：

{
  name: 'Bob',
  isSelected: ko.computed(function(){ return $data === $root.selectedChild(); })
}

但没有这样的运气：在我的评估器函数内部，$data和$root是未定义。

我还尝试在评估器中使用 ko.contextFor ，因为它确实授予对 $data 和 $root 的访问权限。不幸的是，在我的求值器函数中，contextFor 也始终返回undefined。 （无论如何，我并没有对这个策略抱有很高的希望——如果我必须像这样在背后进行，目前还不清楚淘汰赛能够如何很好地跟踪依赖关系。）

我总是可以手动为每个孩子设置一个属性引用回父视图模型的视图模型。但我知道淘汰赛有能力为我做到这一点，并且我想至少在我自己编写之前探索一下我是否可以使用它的机制。

看起来应该可以将上面的绑定表达式转换为计算的可观察量 - 毕竟，这就是淘汰赛已经做的事情：

另一个巧妙的技巧是声明性绑定可以简单地实现为计算的可观察量。

但是，当我编写自己的计算可观察量时，如何处理 $data 和 $root 伪变量呢？

Answer 1

伪变量仅在数据绑定上下文中可用。理想情况下，视图模型本身不应该知道或对显示它的视图有任何依赖性。

因此，当在视图模型中添加计算的可观察量时，您不知道它将如何绑定（就像 $root 一样）。视图模型或视图模型的一部分甚至可以分别绑定到不同级别的页面的多个区域，因此伪变量会根据您开始使用的元素而有所不同。

这取决于您想要完成的任务，但是如果您希望您的孩子有一个 isSelected 计算可观察量来指示该项目是否与父视图模型上的选定项目相同，那么您将需要找到一种方法让父母可以为孩子服务。

一种选择是将父级传递给子级的构造函数。您甚至不需要将指向父级的指针添加为子级的属性，只需在计算的可观察值中直接使用它即可。

类似：

var Item = function(name, parent) {
   this.name = ko.observable(name);  
   this.isSelected = ko.computed(function() {
       return this === parent.selectedItem();        
   }, this);
};

var ViewModel = function() {
   this.selectedItem = ko.observable();
   this.items = ko.observableArray([
       new Item("one", this),
       new Item("two", this),
       new Item("three", this)
       ]);
};

示例：http://jsfiddle.net/rniemeyer/BuH7N/

如果您关心的是所选状态，然后您可以调整它以将对 selectedItem 可观察到的引用传递给子构造函数，例如： http://jsfiddle.net/rniemeyer/R5MtC/

如果您的父视图模型存储在全局变量中，那么您可以考虑不将其传递给孩子并直接使用它，例如： http://jsfiddle.net/rniemeyer/3drUL/。不过，我更喜欢将参考信息传递给孩子。

Answer 2

根据我的经验，如果 Item 在应用程序的持续时间内处于活动状态，@RP Niemeyer 的答案中的方法就很好。但如果不是，它可能会导致内存泄漏，因为 Item 的计算可观察量设置了与 ViewModel 的反向依赖关系。再说一遍，如果您从未删除任何 Item 对象，那也没关系。但是，如果您确实尝试摆脱 Item，它们将不会被垃圾收集，因为淘汰仍将具有反向依赖引用。

您可以确保对计算结果进行 dispose() 处理，也许是在 Item 消失时调用的 cleanup() 方法中，但您必须记住每当删除 Item 时都执行此操作。

相反，为什么不让 Item 变得不那么智能，并让 ViewModel 告诉它何时被选择呢？只需将 Item 的 isSelected() 设为常规的旧可观察对象，然后在 ViewModel 中订阅 selectedItem 并在内部更新那个订阅。

或者，使用 @RP Niemeyer 的 pub/sub 解决方案 。 （公平地说，这个解决方案是在他在这里回答之后出现的。）不过，您仍然需要清理，因为它也会创建反向依赖关系。但至少耦合性减少了。

有关更多详细信息，请参阅关于同一主题的我最近的问题的答案。