如何維護引用KnockoutJS中單擊事件的正確執行上下文？

Question

這裏是一個的jsfiddle這說明我的問題：http://jsfiddle.net/dDEd5/4/

總之，我有一個簡單的視圖模型：

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"; 
    } 
} 

我試圖用一個「點擊」綁定該視圖模型綁定。問題是當我的綁定使用$父上下文時，我的ViewModel中'this'的值無法解析到ViewModel。

例如，這種結合的作品罰款：

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

然而，當我用另一種結合上下文和嘗試使用$家長打電話給我的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); 
}; 

因此，這將創建調用原型的實現與正確的上下文功能的實例的新功能：原型，然後像實際的實例創建綁定版本。