イベントがコンストラクターで定義されている場合に機能するこのソリューションを見てきました。
Javascript のイベント ハンドラー内のクラス メンバー変数へのアクセス
しかし、ハンドラーがプロトタイプで定義されている場合、前のソリューションの "var _self" を参照するスコープがありません。以下のようなコードで機能するバリエーションはありますか?
問題は、「スライド」ハンドラーの「this」にあります... MyView のメンバー変数ではなく、HTML 要素を参照しています。
function MyView(wrapperDiv)
{
this.contentW = 1200;
this.vboxW = 600;
this.vboxH = 400;
this.vboxX = 0;
this.vboxY = 0;
}
MyView.prototype = {
initHorizontalScrollBar : function ($bar)
{
//create the wrappers for the slider
if($bar.find('.slider-wrap').length==0)
$bar.append('<\div class="slider-wrap"><\div class="slider-horizontal"><\/div><\/div>');//append the necessary divs so they're only there if needed
$bar.find('.slider-wrap').width(this.svgWidth);
//initialize the JQueryUI slider
$bar.find('.slider-horizontal').slider({
orientation: 'horizontal',
min: 0,
max: 100,
range:'min',
value: 0,
slide: function(event, ui) {
var difference = this.contentW-this.vboxW;
if(difference<=0)
return;
this.vboxX = (ui.value) / 100 * ( this.contentW-this.vboxW); // 0 >= ui.value <= 100
this.svg.setAttribute("viewBox", toViewBoxString(this.vboxX, this.vboxY, this.vboxW, this.vboxH));
$('ui-slider-range').width(ui.value+'%');//set the height of the range element
}
});
this.sizeHScrollbar();
}
};