Knockout $root 和 $parent 中 Javascript 变量的范围

Question

我有一个设置为使用淘汰赛的 javascript 视图模型，并且我在该视图模型中有两个视图模型，我在我的页面上下文中具有数据绑定。 所以我设置了我的页面，以便一个视图模型通过“with”绑定绑定到我的页面的一部分，然后另一个视图模型通过“with”绑定绑定到另一个部分。 现在我已经设置好了，以便在单击事件之后页面上的一个项目绑定到 $root（容器视图模型），并且我想在另一个视图模型上编辑一些可观察对象（不在本节我有“with”绑定的页面）。在我调用的“root”方法中，我将其设置为“var self = this”，然后编辑我需要在另一个视图模型上编辑的属性。问题是我的问题是，当我在“with”绑定中调用 $root 或 $parent 时，该方法的范围从我想要操作的原始对象（本例中的容器或“root”）更改为作为具有“with”绑定的视图模型，因此它没有我需要的任何变量或我需要操作的其他视图模型。

有没有办法将我的范围从 $parent 或 $root 调用更改为我目前得到的范围之外的其他内容？我只希望范围是容器对象的范围，而不是特定的视图模型。

代码示例（在 TypeScript 中）：

class Container
{
  viewModelA = new ViewModel();
  viewModelB = new ViewModelB();

  clickMe(){
    var self = this;
    console.log(self);
    self.viewModelB.property("yes");
  }
}

<span data-bind="with: viewModelA"> <button data-bind="event: {click: $root.clickMe}" /></span>

console.log 将输出 viewModelA，我会在调用 self.viewModelB 时收到错误。

Answer 1

有多种方法可以更改click 处理程序的范围。

使用Bind

您可以使用bind javascript method，这样您就可以在调用函数时显式指定this 的值：

<button data-bind="event: { click: $root.clickMe.bind($root) }" />

在您的clickMe 中，this 将成为您的Container

将$root作为参数传递

<button data-bind="event: { click: function() { $root.clickMe($root) } }" />

您需要将您的clickMe 更改为：

clickMe(container){
    var self = container;
    console.log(self);
    self.viewModelB.property("yes");
  }

使用“箭头函数”

或者您可以将 clickMe 更改为“箭头函数”，这是一个 TypeScript 构造，用于在函数调用期间保留 this：

clickMe = () => {
    var self = this;
    console.log(self);
    self.viewModelB.property("yes");
  }

但是，这会将 clickMe 从 Container 原型移动到实例函数中，因此它可能存在性能问题，但您无需更改数据绑定操作。

旁注：Knockout 有一个专用的click binding，因此您可以将data-bind="event: {click: $root.clickMe}" 替换为data-bind="click: $root.clickMe"。