2016-11-16 12 views
2

jQueryでタブウィジェットを拡張しようとしています。 (ユーザーによってトリガーされた)新しいタブまたは(既存のタブのための)ページの読み込みに適用されます。私は、このすべてをウィジェットの外部で動作させるために、通常のタブウィジェットと一連のカスタムjavascript関数を使用することができました。しかし、もっとモジュラー化するために、私はこれらの関数を拡張ウィジェットのメンバー関数にします。そのウィジェット内の.each()メソッド内からjQueryウィジェットのパブリックメソッドまたはプライベートメソッドにアクセスする

ウィジェット:

$.widget("custom.extendedTabs", $.ui.tabs, { 
    ,_addOptions: function($el) { 
     //add a "close" button and an "options" button on each tab on mouseover 
    } 
    ,_create: function() { 
     this.element.find("li").each(function(i,el){ 
      this._addOptions($(this)); 
     }); 
     return this._super(); 
    } 
    ,addTab: function() { 
     //handle tab creation 
     ........ 
     this._addOptions(<newlyCreatedliElement>); 
    } 
}); 

スタン:

$(".tabs").each(function(){ 
    $(this).extendedTabs(); 
}); 

サンプル:

<div id="tabs1" class="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Nunc tincidunt</a></li> 
    <li><a href="#tabs-2">Proin dolor</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p> 
    </div> 
    <div id="tabs-2"> 
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus.</p> 
    </div> 
</div> 

<div id="tabs2" class="tabs"> 
    <ul> 
    <li><a href="#tabs-3">Nunc tincidunt</a></li> 
    </ul> 
    <div id="tabs-3"> 
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p> 
    </div> 
</div> 

問題:

テストの結果、this._addOptions()_create()から直接呼び出しても問題はありません。しかし、_create().each()から呼び出すと、私は同じ成功を収めません。そうしようとすると、this.addOptions is not a functionがエラーとして表示されます。

.each()の中のthisは、それを呼び出す親ウィジェットではなく、反復されたインスタンス要素そのものを表しています。しかし、.each()というオブジェクトを参照する方法があると思っていました。

UPDATE:

私は成功し、次のと.each()を交換することができました:

for (var el in this.element.find("li").toArray()) { 
    this._addOptions($(this.element.find("li").toArray()[el])); 
} 

しかし、不格好な感じなので、私はまだ持っていることが誰かからいくつかの洞察力をいただければ幸いですクリーナーメソッド。

私は別の解決策と考えられてきた

答えて

0

- jQueryの.each()を保持1:

,_create: function() { 
    var self=this; 
    this.element.find("li").each(function(i,el){ 
     self._addOptions($(this)); 
    }); 
    return this._super(); 
} 
関連する問題