扩展jQuery UI小部件 - 如何访问父级事件

Question

我正在尝试创建一个jQuery小部件，它扩展自ui.slider。我希望有一个自定义方法在“slide”事件上执行。我尝试重写父项的选项，就像通常使用滑块小部件时一样，但是我遇到了这个变量作用域的问题：

$.widget( "ui.myslider", $.ui.slider, {
    _create: function() {
        this.foo = "bar";

        // Outputs "bar"
        this._mySlide();

        // Outputs "undefined" when triggered
        this.options.slide = this._mySlide;

        $.ui.slider.prototype._create.apply(this, arguments);
    },
    _mySlide: function() {
        alert(this.foo);
    }
}

如何在幻灯片事件中触发我的函数并访问我的变量？

编辑： ui.slider源代码链接：https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.slider.js

编辑：解决方案

$.widget( "ui.myslider", $.ui.slider, {
    _create: function() {
        $.ui.slider.prototype._create.apply(this, arguments);
        this.foo = "bar";
    },
    _slide: function() {
        $.ui.slider.prototype._slide.apply(this, arguments);
        alert(this.foo);
    }
}

- Eero Heikkinen

Answer 1

在jQuery UI >= 1.9中，你可以使用_super方法代替：

_slide: function() {
  this._super();
  // equivalent to $.Widget.prototype._slide.call( this );
}

或者使用 superApply:

_slide: function() {
  this._superApply(arguments);
  // equivalent to $.Widget.prototype._slide.apply( this, arguments );
}

- ehynds