requirejs + jqueryui = $.widget nicht definiert
Ich bin mit requirejs + jquery + jqueryui. Ich habe gelesen, TONNEN von Beispielen, wie dies zu tun. Ich glaube, ich verstehe die verschiedenen Ansätze und es scheint mir, dass mein setup sollte fehlerfrei funktionieren. Jedoch, ich bekomme gelegentlich eine $.widget ist nicht definiert Fehler in meinem custom-Module, die abhängig von jquery-ui. Es ist ein Schmerz, denn er ist unbeständig und schwer zu reproduzieren, so ist es schwer für mich zu testen, alternative Ansätze.
Ich bin nicht shimmen alle meine jquery-plugins, da gibt es eine Menge. Stattdessen bin ich dem laden von jquery mit einem separaten requirejs nennen. Klicken Sie dann in der callback-für die, die ich laden den rest von meinem Zeug. Diese Weise ich don ' T haben, um eine Liste der Platten für alle meine jquery-plugins.
Jquery-ui, ich ein shim verwenden, um es davon abhängen, jquery. Dann alle meine custom-Module, die die widget-factory haben 'jquery-ui' in Ihrer Abhängigkeit Liste.
In meine Vorlagen...
requirejs.config({
baseUrl: ATHLETE.siteConfig.jsBaseUrl,
paths: {
'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
'jquery-ui': '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min'
},
shim: {
"jquery-ui": ['jquery']
},
waitSeconds: 15
});
requirejs(['jquery'], function($) {
requirejs(['site'], function() {
requirejs(['mypage']);
});
});
Beachten Sie, dass ich bin laden site.js vor mypage.js. Sie haben einige gemeinsame Abhängigkeiten. In meinem build-config, die ich ausschließen site.js aus mypage.js daher die gemeinsamen Abhängigkeiten sind zusammengestellt in site.js und nicht mypage.js. Also, ich brauchen, um vollständig zu laden site.js vor dem laden mypage.js oder sonst noch benötigen könnte versuchen, laden die gemeinsamen Abhängigkeiten getrennt.
Hier ein Beispiel für ein benutzerdefiniertes Modul von mir, das hängt jquery-ui.
define([
'jquery',
'jquery-ui'
],function($) {
$.widget('ui.viewAllSponsorsWidget', $.ui.dialog, {
options: {
autoOpen: false,
dialogClass: 'view-all-sponsor-dialog-wrap',
draggable: false,
modal: true,
resizable: false,
width: 370,
height: 400
}
});
});
Den Fehler $.widget ist nicht definiert wird verursacht durch die 5. Zeile, der diese und ähnliche custom Module von mir. Wieder, es ist wirklich inkonsistent und schwer zu reproduzieren. Mehr als oft nicht, bekomme ich NICHT den Fehler, auch wenn ich klar meine cache. Kann jemand denken, dass die Linie 5 könnte möglicherweise werden immer ausgeführt, bevor die jquery-ui vollständig geladen ist?
UPDATE Aug 16, 2013
War ich in der Lage, diese aufzuspüren ein bisschen mehr.
Ich erstellte ein einfaches Modul, das hängt davon ab, jquery und jquery-ui.
define([
'jquery',
'jquery-ui'
],function($) {
console.log('$.widget is defined? ' + Boolean($.widget));
console.log('jQuery.widget is defined? ' + Boolean(jQuery.widget));
});
Die Ausgabe ist wie folgt:
LOG: $.widget is defined? false
LOG: jQuery.widget is defined? true
Also irgendwie ist das Globale jQuery-Objekt hat-widget definiert, aber die Kopie, die mich durch requirejs nicht.
- Wenn es nicht laden jquery-ui-zuerst ist es ein Pfad-Fehler in der Konsole? Siehe auch: stackoverflow.com/questions/17026036/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Diese Antworten sind immer ein bisschen alt. Ich hoffe die bieten ein bisschen eine aktualisierte Antwort. jQuery-UI jetzt kommt mit AMD-support eingebaut. Sie können einfach bekommen Sie es mit
und dann in requirejs.config fügen Sie einfach jquery_ui auf die Pfade{} Abschnitt. Kein shim mehr erforderlich.
Wenn Sie möchten, laden Sie nur den kleinen Teilbereich der jquery-Benutzeroberfläche, die Sie brauchen, dann bower install jquery-ui und dann den build-tool, requirejs bietet, um ein Paket zu erstellen. Andernfalls, wenn Sie nur versuchen zu importieren einer einzelnen Datei, die jquery-ui-Dateien zu laden versucht, Ihre Abhängigkeiten und die bekommst du Dinge wie "widget" nicht definiert" oder "nicht gefunden-Datei widget.js" etc.
Ich habe einen schnellen Kommentar hier: https://hendrixski.wordpress.com/2015/04/17/adding-only-the-parts-of-jquery-ui-that-you-need-into-your-requirejs-project/
Hoffe, das hilft.
Ändern Sie Ihre shim zu diesem:
Hier ist ein Beispiel von einem Haufen von Require.js Konfigurationen für populäre Bibliotheken.
hatte ein ähnliches Problem waren, 3. Teil ASP.NET die Kontrollen waren Entführung des jQuery definieren.
$telerik.$ = jQuery.noConflict();
Obwohl das Skript selbst gereinigt, der Schwanz von jQuery effektiv überschrieb meine RequireJS mapping
if ( typeof definieren === "function" && definieren.amd ) {
define( "jquery", [], function () { return jQuery; } );
}
RequireJS verzögern würde laden von Skripten und die RadScriptManager halten würde, die Injektion scripts unter dem form-tag und so gab es Zut seltsame Rasse Fragen.
Einige Anfragen, $ wurde von meiner Karte und war global
Andere Anfragen $ wurde $Telerik.$ und war nicht die Globale und eine andere version
Lösen mein Problem ich rollte mich wieder auf die jQuery-version der Telerik-controls Verwendung und hart codiert in einem scrip-tag, um sicherzustellen, dass es immer verfügbar war und dann deaktiviert, Telerik laden seine eigenen JQuery. Nicht AMD, aber Sie funktioniert gut genug für mich.
Ich denke ich habe eine Lösung für mein problem. Aber da dieses problem wurde schwer zu reproduzieren, ich werde eine Weile warten, bevor ich "akzeptieren" meine eigene Antwort als richtig an. Auch meine Antwort wird nicht geladen, mit jquery requirejs. Ich sehe keinen Grund, warum dies wichtig für mich. Aber wenn jemand sieht einen Weg, um dies zu erreichen, ohne das laden von jquery in einer separaten script-tag, lassen Sie es mich wissen.
Da jQuery definiert sich selbst als eine benannte AMD-Modul, kann ich das einfach laden Sie es synchron zunächst mit einem standard-script-tag, bevor ich irgendeine requirejs Zeug. Das habe ich dann auch entfernen, meine Pfade, Eintrag für jquery, da es bereits geladen unter dem Namen 'jquery' durch diesen Punkt. Dadurch, requirejs gibt das richtige "Kopie" von jQuery zu mir und alles funktioniert. Ich muss auch jQuery verwenden.noConflict, weil ich mit Garmin Communicator-das hängt davon ab, Prototyp. So, hier ist meine aktuelle code, das weglassen irrelevanter Teile.
Und meine Module können immer noch abhängig von jquery und jquery-ui-wie üblich:
wenn Sie möchten, überschreiben Methode von jQuery-ui , dann ist der beste nutzen Requirejs init-Methode , stellt dies sicher, dass in jedem Modul, die auch von jQuery-ui nutzen geänderten code.
verwenden Sie Ihre Shim wie diese
Stieß ich auf eine ähnliche, sehr gelegentlichen Fehler bei der Verwendung von jQuery UI mit Require.js das habe ich behoben, indem Sie mithilfe der jqueryui-amd Konvertierungs-script erstellen "AMD-gewickelt-Module für jQuery UI für den Einsatz im loader wie RequireJS".
Installation mit npm.
Konvertieren Sie die jQuery UI-JavaScript-Dateien als heruntergeladen jqueryui.com
Dann fügen Sie den Pfad des neuen umgewandelt
jqueryui
Verzeichnis require.js config-Datei.Schließlich in Ihre JavaScript-Datei, wo Sie eines der jQuery-UI-Komponenten.
Ich hatte das gleiche problem wie du, die Definition meiner widgets in RequireJS-Module, und obwohl ich bin nicht 100% sicher, dass dies die beste Lösung, es war eine, die arbeitete für mich ohne Verletzung der Integrität der Module:
Wenn Sie benötigen, jquery-ui in das Modul, jQuery wird automatisch erforderlich und das $ - Objekt haben Sie alles, was Sie brauchen.