如何在KnockoutJS中为click事件维护引用正确的执行上下文？

Question

这是一个jsFiddle,它演示了我的问题:http://jsfiddle.net/dDEd5/4/

总之,我有一个简单的ViewModel:

ViewModel = function () {}
ViewModel.prototype = {
    child: function () {},
    children: new Array(3),

    outermethod: function () {
        this.innerMethod();
    },

    innerMethod: function () {
        alert("ok!");
    },

    outerProperty: function () {
        return this.innerProperty();
    },

    innerProperty: function() {
        return "Property is OK";
    }
}

我试图使用'click'绑定绑定此ViewModel.问题是当我的绑定使用$ parent上下文时,我的ViewModel中的'this'值无法解析为ViewModel.

例如,此绑定工作正常:

<div>
    <span data-bind="text: outerProperty()"></span>
    <button data-bind="click: outermethod">This Works</button>
</div>

但是,当我使用另一个绑定上下文并尝试使用$ parent调用我的ViewModel时,事情就会崩溃.在以下两个示例中,属性解析正常; 但是,按钮都错了:

<div>
    <!-- ko with: child -->
    <span data-bind="text: $parent.outerProperty()"></span>
    <button data-bind="click: $parent.outermethod">This Doesn't</button>
    <!-- /ko -->
</div>

和

<div>
    <!-- ko foreach: children -->
    <span data-bind="text: $parent.outerProperty()"></span> 
        <button data-bind="click: $parent.outermethod">These Don't Either</button>
    <!-- /ko -->
</div>

我已经完成了我的尽职调查,试图了解执行上下文如何在javascript中工作以及为什么这些示例失败; 但是,我对此感到茫然.

Answer 1

当Knockout执行处理程序时,它使用在该级别绑定的当前数据作为上下文.因此,当使用类似$parent或类似的东西时$root,这可能会导致问题.

有几种方法可以处理它:

- 你可以将它绑定到绑定本身的正确上下文,如:

`click: $parent.outermethod.bind($parent)`

这将返回一个确保$parent将会执行的新函数this.

- 您可以在视图模型中绑定它.由于您将功能放在原型上,因此更具挑战性.

一种技术(不使用原型)是使用变量来跟踪正确的值this并在函数中引用它,如:

var ViewModel = function() {
  var self = this;

  this.outermethod = function() {
     self.innerMethod();
  };

};

使用原型,您仍然可以将实现放在原型上,然后在实际实例上创建绑定版本,如:

var ViewModel = function() {
   this.outermethod = this.outermethod.bind(this);
};

因此,这将在实例上创建一个新函数,该函数使用正确的上下文调用原型的函数实现.