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);，但我得到了相同的结果;该方法不受支持。

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

Answer 1

这可能是由于您绑定事件处理程序的方式。有多种方法可以执行此操作，每种方法都有其细微差别，请参阅此处的官方文档：http://knockoutjs.com/documentation/click-binding.html和上下文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>

Knockout - 单击绑定到对象功能 - 范围问题

2 个答案: