淘汰赛 - 单击绑定到对象函数 - 范围问题

Question

我有一个简单的字符串集合，我想使用 Knockout 的 foreach 绑定为其创建按钮。该按钮使用单击绑定在我的对象中加载一些数据。绑定正确发生，但实际加载功能失败，告诉我不支持方法。

这是我所拥有的：

//My Object
function MyObject()
{
    this.WorkerFunction = function(id)
    {
        //Do Work
    }

    this.Load = function(id)
    {
        //Call Another Function
        this.WorkerFunction(id); //Error: Object doesn't support property or method 'WokerFunction'
    }
}

//Creation
var myObject = new MyObject();

//VM Binding
var vm = ko.mapping.fromJS(jQueryAjaxObject);
ko.applyBindings(vm);

//HTML
<div data-bind="foreach: stringIDCollection">
    <button data-bind="click: function() { myObject.Load($data) }"> Load </button>
</div>

---

单击按钮时，出现以下错误：Object doesn't support property or method 'WokerFunction'。我的代码中其他地方的鼠标移动事件也出现了类似的错误，但我能够使用下面的绑定函数解决这个问题。但是，我无法让它适用于 Knockout 绑定。​​

$("myElement").mousemove(this.MouseMove.bind(this)); 

---

编辑

我也试过var self = this;和self.WorkerFunction(id);，但我得到了相同的结果；不支持该方法。

---

问：在保持 this 范围的同时，处理 Knockout Click 绑定到对象函数的正确方法是什么？

---

Answer 1

这可能是由于您绑定事件处理程序的方式。有多种方法可以做到这一点，每种方法都有其细微差别，请参阅此处的官方文档：http://knockoutjs.com/documentation/click-binding.html 和上下文 wrt this 此处：https://dzone.com/articles/knockout-click-binding-and

Answer 2

您必须存储对this 的引用。

了解how the this keyword works in JavaScript.

// converted to commonly accepted coding style
function ViewModel() {
    var self = this;

    this.workerFunction = function(id) {
        //Do Work
    };

    self.load = function(id) {
        self.workerFunction(id);
    };

    // do initialization here...
    self.stringIDCollection = ko.mapping.fromJS(/*...*/);
}

ko.applyBindings(new ViewModel());

---

除此之外：不要在绑定中使用 JavaScript 代码。 （尤其不是整个函数。永远不会。）这正是淘汰赛旨在避免的事情。

将load 设为视图模型的方法，如上所示

<div data-bind="foreach: stringIDCollection">
    <button data-bind="click: $root.load">Load</button>
</div>