Пользовательский интерфейс JQuery: привязать обработчик к методу: не удается получить элементы?

Я создаю небольшой виджет пользовательского интерфейса JQuery, в котором я привязываю обработчик к элементу:

this.element.bind("keyup", { list: this.container }, this._filter);

Виджет имеет опции:

options:
{
    dataUrl: '',
    isEnabled: true
},
_filter: function (event)
{
    var input = $(this);
    var that = this;
    alert(that.options.isEnabled);
    if (that.options.enabled) {
        that.container.show();
        event.data.list.find("li").each(function () {
            if ($(this).text().toLowerCase().indexOf(input.val().toLowerCase()) < 0) {
                $(this).hide();
            }
            else {
                $(this).show();
            }
         });
     }
 },

Но когда я делаю предупреждение об одном параметре в _filter, я получаю сообщение об ошибке: «that.options is undefined». То же самое для любого другого элемента, к которому я пытаюсь получить доступ/использовать, например, если функция смогла получить только то, что определено внутри или из передаваемых данных события.

Я что-то упускаю? Спасибо


widget jquery bind jquery-ui
person user706058    schedule 22.06.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что областью/контекстом/этой функции слушателя (_filter) является объект jQuery, к которому он был привязан. В вашем случае this в функции _filter фактически будет ссылаться на this.element виджета при вызове в качестве прослушивателя событий. Что вы можете сделать, так это следующее:

this.element.bind("keyup", { list: this.container }, $.proxy(this, "_filter"));

Что делает прокси-метод, так это, по сути, оборачивает функцию, которая будет применяться в определенном контексте (см. документацию). Преимущество прокси в том, что вы можете отменить привязку, используя исходную функцию, например:

this.element.unbind("keyup", this._filter);

Надеюсь это поможет.

person Manuel Leuenberger    schedule 22.06.2011
comment
Спасибо! Другой обходной путь — передать элемент как свойство eventData: this.element.bind("keyup", { element : this.element, list: this.container }, this._filter); - person user706058; 22.06.2011