requirejs + jqueryui = $.widget non défini

Je suis à l'aide de requirejs + jquery + jqueryui. J'ai lu des TONNES d'exemples de comment faire cela. Je crois que je comprends, les différentes approches et il me semble que mon installation devrait fonctionner correctement. Cependant, je reçois parfois un $.widget n'est pas défini erreur dans mes modules personnalisés qui dépendent de jquery ui. C'est une douleur, car il est incohérent et difficile à reproduire, et il est donc difficile pour moi de tester d'autres approches.

Je ne suis pas de calage tous mes plugins jquery, parce qu'il y a beaucoup de choses. Au lieu de cela, je suis le chargement de jquery avec un requirejs appel. Ensuite, dans la fonction de rappel pour que je charge le reste de mes affaires. De cette façon, je n'ai pas de maintenir une liste de cales pour tous mes plugins jquery.

Pour jquery-ui, j'utilise une cale de le faire dépendre de jquery. Tous mes modules personnalisés qui utilisent le widget de l'usine 'jquery-ui" dans leur liste de dépendances.

Dans mes modèles...

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']);
    });
});

Remarque que je suis de chargement site.js avant mypage.js. Ils ont partagé quelques dépendances. Dans mon construire de config, j'ai exclure site.js à partir de mypage.js donc partagé les dépendances sont compilés dans site.js et pas mypage.js. Donc, j'ai besoin de charger complètement site.js avant de charger mypage.js ou d'autre peut exiger que vous essayez de charger ceux qui sont partagés dépendances séparément.

Voici un exemple de module personnalisé de la mine qui dépend de 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
        }
    });
});

L'erreur $.widget n'est pas définie est causée par la ligne 5 de ce type de modules personnalisés de la mine. Encore une fois, il est vraiment contradictoires et difficiles à reproduire. Le plus souvent, je n'ai PAS l'erreur, même quand j'ai vider mon cache. Peut-on penser de manière que la ligne 5 pourrait être exécuté avant de jquery-ui est complètement chargé?

Mise à JOUR le 16 Août, 2013

J'ai été en mesure de suivre cela d'un peu plus.
J'ai créé un module simple qui dépend de jquery et jquery-ui.

define([
    'jquery',
    'jquery-ui'
],function($) {
    console.log('$.widget is defined? ' + Boolean($.widget));
    console.log('jQuery.widget is defined? ' + Boolean(jQuery.widget));
});

La sortie se présente comme suit:

LOG: $.widget is defined? false
LOG: jQuery.widget is defined? true

Donc, en quelque sorte, le mondial de l'objet jQuery a widget défini, mais la copie qui m'a été fourni par requirejs ne pas.

OriginalL'auteur Dustin | 2013-07-22