plugin jQuery ne fonctionne pas dans un module requirejs

Question

Voici ce que j'ai en require.config.shim (en main.js):

'jquery.tabs':{ 
    deps:['jquery'], 
    exports: '$' 
}, 

Et voici les parties pertinentes dans mon module:

define(['jquery','underscore','backbone','tools','jquery.tabs'], function($,_,Backbone,Tools){ 

    //SNIP 

    myView = Backbone.View.extend({     
     //SNIP 
     render:  function(){ 
      //SNIP 
      var el = tmp.find(".tabholder") 
      console.log(el); // not empty 
      console.log($.fn.createTabHolder); //not empty 

      el.createTabHolder(); //TypeError: el.createTabHolder is not a function 
      //el.createPopup(); //different plugin, same error here 
      //el.hide();   // this works just fine 
      //SNIP 
     }, 
     //SNIP 

    }); 
    //SNIP 
}); 

Cela fonctionne très bien lorsque j'utilise Chrome ou à partir de localhost, mais je reçois "TypeError: el.createTabHolder n'est pas une fonction" lorsque je l'exécute à partir du serveur en utilisant Firefox (22.0).

Voici le code du plugin juste au cas où, il travaillait très bien avant je suis passé à l'aide requirejs:

(function (jQuery){ 
    jQuery.fn.createTabHolder = function(){ 
     this.html(""); 
     var tbar = $("<div/>",{ 
      class:"tabbar padfix noselect" 
     }); 

     tbar.appendTo(this); 

     var tholder = $("<div/>",{ 
      class:"tabcontainer" 
     }); 

     tholder.appendTo(this); 


    }; 

    jQuery.fn.addTab = function(title,data,index, constructor,model,obj){ 
     var self=this; 
     var ts = $("<span/>",{ 
      class:"tabselector", 
      html:title, 

     }); 

     var tab = $("<div/>",{ 
      class:"tabselector_tab" 

     }); 
     if(data.jQuery) 
      tab.append(data); 
     else 
      tab.html(data); 
     tab.appendTo(this.find(".tabcontainer")); 
     if(constructor) 
      ts.one("click",{element:tab,model:model,obj:obj},constructor); 

     ts.on("click",function(){ 
      self.find(".selectedtab").removeClass("selectedtab"); 
      tab.addClass("selectedtab"); 
      self.find(".activetabselector").removeClass("activetabselector"); 
      ts.addClass("activetabselector"); 
     }); 
     if(this.find(".activetabselector").length==0) 
      ts.trigger("click"); 

     ts.appendTo(this.find(".tabbar")); 
    } 


    return jQuery; 
})(jQuery); 

Aucune idée de ce qui se passe, et ne peut pas vraiment donner quoi que ce soit d'autre que cela.

Answer 1

Il existe peut-être différentes versions de jquery. Essayez ceci:

define(['jquery'], function (jQuery){ 
    jQuery.fn.createTabHolder = function(){ 

     // ... 

    }; 

}); 

au lieu de ceci:

(function (jQuery){ 
    jQuery.fn.createTabHolder = function(){ 

     // ... 

    }; 

})(jQuery); 

Answer 2

Remplacée

var el = tmp.find(".tabholder"); 

avec ceci:

var el = $(tmp.find(".tabholder")); 

et il semble fonctionner maintenant, je ne sais pas pourquoi tho, prob fixé un problème de synchronisation étrange ou quelque chose. Essai & erreur ftw.