2011-10-28 28 views
0

サブクラスを拡張する親クラスを設定しようとしていますが、スーパークラスから呼び出されたときにthis.elementを参照しようとすると、未定義です。私はここで間違って何をしていますか?Javascript継承 - this.elementはサブクラスで定義されていません

$.widget("ui.testSuper", $.extend({}, $.ui.testSub.prototype, 
{ 
    _init: function() 
    { 
     $.ui.testSub.prototype._init(); 
    }, 
... 
})); 

$.widget("ui.testSub", $.ui.mouse, 
{ 
    _init: function() 
    { 
     this.element.addClass("some-class"); 
    }, 
... 
}); 

$('#some-element').testSub({ }); // this works fine 

$('#some-element').testSuper({ }); // this.element is undefined 
+0

おそらくjQueryがどこかで黒い魔法をしているためです。 – Raynos

答えて

2

$.ui.testSubを延長するとその時点では存在しません。あなたがする必要があるのは、コードのこれら二つのブロックを交換することです:

//Should be first 
$.widget("ui.testSub", $.ui.mouse, 
{ 
    _init: function() 
    { 
     this.element.addClass("some-class"); 
    }, 
... 
}); 

$.widget("ui.testSuper", $.extend({}, $.ui.testSub.prototype, 
{ 
    _init: function() 
    { 
     $.ui.testSub.prototype._init(); 
    }, 
... 
})); 

$('#some-element').testSub({ }); // this works fine 

$('#some-element').testSuper({ }); // then it will work fine as well 

here

UPDATE

ライブの例を参照してください私はあなたが言っているものを得ました。あなたは、あなたがあなたの要素のコンテキストを失うことはありません。この

$.ui.testSub.prototype._init.call(this); 

のような基本メソッドを呼び出す必要があります。例はhere

+0

注文時の有効な点は、私が質問を投稿したときにそれを考慮しなかったことです。しかし根本的な問題は残っています。実際にウィジェットを呼び出そうとしている要素を実際に追加すると、それを見ることができます。 http://jsfiddle.net/46D8T/12/ – GhostOfPerdition

+0

投稿で私の更新を見てください –

+0

華麗な、ありがとうございます。 – GhostOfPerdition

0

ここでは$ .extendを使用するのはわかりません。

は、ここで私は、通常のjQuery UIウィジェットを拡張する方法は次のとおりです。

$.widget('ui.testSuper', $.ui.testSub { 
    _create: function() { 
     $.ui.testSub.prototype._create.call(this); 
    } 
}); 

私はあなたが_initを使用しているので、jQueryのUIの古いバージョンを使用している必要があります参照してください。

関連する問題