Question

我有以下代码。显然我想要的是在window.xl.timectrl.Tuio.prototype.tcHour12Changed被更改时调用方法this.hour12。我绝对相信this.hour12指的是一个实际的选择框，但是当我改变它时没有任何反应。这有什么不对？

window.xl.timectrl.Tuio = function(label_base, update_ui){
    this.update_ui = update_ui;
    this.hour12 = $('#' + label_base + '_hour12');
    this.hour12.off('change').on('change', getSelectBoxHandler(this.hour12, $.proxy(this.tcHour12Changed), this));
}

window.xl.timectrl.Tuio.prototype.tcHour12Changed = function(event, ui, value, id){
    //handle event
    this.update_ui();
}

function getSelectBoxHandler(select_box, onchange){
    var handler = function(event, ui){
        var id = select_box.attr('id');
        var value = select_box.find('option:selected').attr('value');
        onchange(event, ui, value, id);
    }
    return handler;
}

这里的要点是getSelectBoxHandler()返回一个绑定到特定选择框的处理程序，并为处理程序提供一个闭包。当更改选择框时调用此返回的处理程序时，它将知道用于从中提取当前值的选择框，以及用于将值传递给的实际onchange处理程序，在本例中为window.xl.timectrl.Tuio.prototype.tcHour12Changed()。我希望这个实际的处理程序能够访问对象的成员，比如this.update_ui()，这就是为什么我希望实际的处理程序是对象的成员而不是独立的函数。

这样，从选择框中提取值的代码不必在每个处理程序中重复，并且不需要在每个这样的处理程序中对任何函数进行显式调用来执行此工作。这种方法在独立函数中运行良好，但在我尝试使用对象成员作为处理程序时破坏了。我很感兴趣为什么这不起作用。

Answer 1

我能够让它工作，但不完全是你如何写它。在执行.on('change',...)部分时，我无法调用getSelectBoxHandler函数并传递参数。如果删除参数，例如：

this.hour12.off('change').on('change', getSelectBoxHandler);

然后它开始工作，但是没有完成你的目标。所以我使用了匿名函数：

window.xl.timectrl.Tuio = function (label_base, update_ui) {
    this.hour12 = $('#' + label_base + '_hour12');

    this.hour12.off('change').on('change', function () {
        getSelectBoxHandler(this.hour12, $.proxy(this.tcHour12Changed), this);
    });
}

似乎工作正常，请点击此处：http://jsfiddle.net/mey9LzLw/

JQuery通过闭包绑定到对象方法

1 个答案: