3

我有一个设置为使用淘汰赛的 javascript 视图模型，并且我在该视图模型中有两个视图模型，在我的页面上下文中我有数据绑定。所以我设置了我的页面，以便一个视图模型通过“with”绑定绑定到我页面的一部分，然后另一个视图模型通过“with”绑定绑定到另一个部分。现在我已经设置好了，以便在点击事件之后页面上的一个项目我绑定到 $root （容器视图模型）并且我想编辑另一个视图模型上的一些可观察值（不在本节的我有“with”绑定的页面）。在我调用的“root”方法中，我将其设置为“var self = this”，然后编辑我需要在另一个视图模型上编辑的属性。

有没有办法将我的范围从 $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 调用上收到错误。

4

1 回答 1

3

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

使用Bind

您可以使用bind javascript 方法，这样您就可以明确指定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为“箭头函数”，这是this在函数调用期间要保留的 TypeScript 构造：

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

但是，这会将原型clickMe从Container原型转移到实例函数中，因此它可能存在性能问题，但您不需要更改数据绑定表达式。

旁注：Knockout 具有专用的单击绑定，因此您可以替换data-bind="event: {click: $root.clickMe}"为data-bind="click: $root.clickMe".

于 2013-08-27T05:50:52.373 回答