淘汰$root和$parent中Javascript变量的范围

我有一个设置为使用剔除的javascript视图模型,并且在该视图模型中有两个视图模型,在我的页面上下文中有数据绑定.
因此,我设置了页面,以便一个视图模型通过“ with”绑定绑定到页面的某个部分,然后另一个视图模型通过“ with”绑定绑定到另一部分.
现在,我已经设置好它,以便单击事件后页面上的一个项目绑定到$root(容器viewmodel),并且我想在另一个viewmodel上编辑一些可观察对象(不在本节的本节中).我具有“ with”绑定的页面).在我称为“ root”的方法中,将其设置为“ var self = this”,然后编辑需要在其他viewmodel上编辑的属性.问题是,当我在“ 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调用上遇到错误.

解决方法:

有多种更改点击处理程序范围的方法.

使用绑定

您可以使用bind javascript method,使用它可以显式指定调用函数时的this值：

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

在您的clickMe中,这将是您的容器

传递$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构造,可以在函数调用期间保留它：

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

但是,这会将clickMe从Container原型移到了实例函数中,因此可能会出现性能问题,但是您无需更改数据绑定体验.

注意：淘汰赛具有专用的click binding,因此您可以将data-bind =“ event：{click：$root.clickMe}”替换为data-bind =“ click：$root.clickMe”.

标签：typescript,knockout-js,javascript,mvvm
来源： https://codeday.me/bug/20191122/2063013.html