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.

InformationsquelleAutor Dustin | 2013-07-22
Schreibe einen Kommentar