среда, 3 марта 2010 г.

Как подружить ASP.NET AJAX Control контекст c функциями jQuery?

Когда вы пишите AJAX Enabled контролы, то в JS классе для обращения к внутренним свойствам, функциям и тп. вы используете 'this'. При использовании jQuery, при вызове метода ставиться контекст элемента, для которого вы вызываете функцию. Например в each если обратится к this, то получите текущий элемент итератора. Также используя jQuery UI, события которые срабатывают в плагинах, вызываются в контексте элемента. В общем обработчик выглядит так (для примера с draggable плагином):

$('.accept-siblings,.accept-children').droppable({
        accept: 'li.leaf-draggable'
        , greedy: true
        , tolerance: 'pointer'
        , drop: this._onDropHandler
        , over: this._onDragOverHandler
        , out: this._onDragOutHandler
});

_onDropHandler: function(event, ui) {
    // this - будет элемент, над которым мы отпускаем мышь.
    // к внутренним членам вашего ajax класса обратиться не получится.
}

Для решения нам главное пропихнуть контекст AJAX класса. Использую Function.createDelegate мы не выкрутимся, т.к. он заменят контекст вызова, в нашем случае в обработчике this будет не элемент, над которым мы отпускаем мышь, а AJAX класс и мы никак не узнаем куда дропать.
Для того чтоб пропихнуть контекст не заменяя его, нам нужен Function.createCallback. Сигнатура такая же, только смысл другой, мы не заменяем контекст, а передаем параметр не изменяя контекст. Теперь в обработчике будет добавляться параметр, который мы передаем:

this._onDropCallback = Function.createCallback(this._onDropHandler, this);

$('.accept-siblings,.accept-children').droppable({
    ...
    , drop: this._onDropCallback
});

_onDropHandler: function(event, ui, context) {
    // this - так и остается элементом над которым мы отпускаем мышь
    // к членам AJAX класса можно обращаться через context. Например context.get_element();
}

2 комментария: