События JQuery Widget в объектно-ориентированном Javascript

Question

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

<script type="text/javascript">
MyClass = function()
{
    this.init();
}

$.extend(MyClass.prototype, 
    {   
        init: function()
        {
            this.field = 'Hello world.';

            /* Let's try using a slider. */
            this.slider = $("#slider");

            this.slider.slider(
                {
                    change: this.callback,
                    min: 270,
                    max: 800,
                    slide: this.callback
                }
            );
        },

        callback: function()
        {
            alert(this.field);
        }
    }
);
</script>

<div id="slider"></div>
<script type="text/javascript">
var myClass = new MyClass();
</script>

Это упрощение проблемы, и я попытался обойти это несколькими способами, например, используя bind вместо нотации обратного вызова:

this.slider.bind('slidechange', this.callback(this));
this.slider.bind('slide', this.callback(this));

Однако это просто приводит к обратному вызову, несмотря на происходящее событие.

Спасибо.

Answer 1

См. http://www.alistapart.com/articles/getoutbindingsituations/ для методов связывания this, используя замыкания

EDIT: В качестве конкретного примера того, как этого можно достичь ...

$.extend(MyClass.prototype, 
{   
    init: function()
    {
        this.field = 'Hello world.';

        /* Let's try using a slider. */
        this.slider = $("#slider");

        this.slider.slider(
            {
                change: this.callback(this),
                min: 270,
                max: 800,
                slide: this.callback(this)
            }
        );
    },

    callback: function(that)
    {
        return function() {
            alert(that.field);
        }
    }
}
);