挖空 - 单击绑定到对象函数 - 范围问题

Knockout - Click Binding to Object Function - Scope Issues

本文关键字：函数范围问题对象单击绑定挖空更新时间：2023-09-26

我有一个简单的字符串集合，我想使用 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' 。我在代码中的其他地方遇到过类似的鼠标移动事件，但我能够使用如下所示的绑定函数解决这个问题。但是，我无法让它适用于淘汰绑定。

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

编辑

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

问：在维护此作用域的同时处理对象函数的挖空单击绑定的正确方法是什么？

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

必须存储对this 的引用。

阅读有关 this 关键字在 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>