2014-09-02 82 views
0

一些基本小部件的方法我有兩個jQuery的窗口小部件,小工具A是基一個和所述窗口小部件乙繼承的widget A.繼承jQuery的窗口小部件,並調用從外部

小窗口的:

$(function() { 
    $.widget("custom.widgetA", { 

     _create: function() { 
      this.element 
       .addClass('ui-widget-a') 
       .append(
        $(document.createElement('div')).text('Widget A') 
       ); 
     }, 

     someMethod: function() { 
      return 'widget A'; 
     } 
    }); 

}(jQuery)); 

的widget乙:

$(function() { 
    $.widget("custom.widgetB", $.custom.widgetA, { 

     _create: function() { 
      this.element 
       .addClass('ui-widget-b') 
       .append(
        $(document.createElement('div')).text('Widget B') 
       ); 

      this._super(); 
     }, 

     someOtherMethod: function() { 
      return 'widget B'; 
     } 
    }); 

}(jQuery)); 

比我申請的Widget B到一些HTML元素

$('#widgetB').widgetB(); 

,現在我想從控件的調用方法someMethod ......爲了做到這一點我用這個代碼

$('#widgetB').widgetA('someMethod') 

,但得到的錯誤信息

不能調用之前widgetA方法初始化;試圖 調用方法「的someMethod」

我知道如果我把它叫做這樣它會工作

$('#widgetB').widgetB('someMethod') 

,但我需要使用基本控件調用它......可能嗎?

這裏是fiddle用我的例子

UPDATE

爲什麼會發生這樣的原因here

回答

1

確實沒有什麼阻止你init在相同的元素荷蘭國際集團兩個部件:

$.widget("custom.widgetB", $.custom.widgetA, { 

    _create: function() { 
     this._super(); 
     $(this.element).widgetA(this.options); 
    } 
}); 

現在,您可以同時調用:

$('#widgetB').widgetA('someMethod'); 
$('#widgetB').widgetB('someMethod'); 

在你的情況下,創建函數實際上創造了新的元素(其中有一個jQuery的速記$("<div>")),所以你必須只包括上述init ializers爲widgetA即之一。只有this._super()一個或$(this.element).widgetA()

Fiddle update


這可能會導致一些額外的複雜性,如果你存儲在widgetA實例非原始對象,但這種模式,你可能不應該做那首先是

+0

是的,我也在想它......但這是一個因素,阻止我從這個解決方案...在這種情況下,從窗口小部件_create方法將被調用兩次。這就是爲什麼我認爲這不是最佳解決方案,應該有更好的解決方法。 – 2014-09-02 10:58:34

+0

好吧,經過一番思考......如果從小部件B中刪除this._super()_create方法,並且只留下this.element.widgetA(this.options)它將解決問題,並且將從小部件A調用_create方法只有一次。請更新您的代碼,我會接受它。感謝您的想法! – 2014-09-02 11:14:36

+0

@AlexWheat這就是我的意思是「只包括一個初始者」,這就是小提琴。以上片段只是概念:) – blgt 2014-09-02 12:07:39