Comment puis-je inclure jQueryUI dans mon application modulaire backbone.js en utilisant RequireJS ?

Question

Je souhaite inclure jQueryUI dans mon application backbone.js en utilisant RequireJS. Le fichier main.js inclus dans mon index.html est le suivant :

require.config({
    paths: {
            jquery: 'libs/jquery/jquery-1.7.2.min',
            jqueryui: 'libs/jquery/jquery-ui-1.8.18.custom.min',
            underscore: 'libs/underscore/underscore-min',
            backbone: 'libs/backbone/backbone-optamd3-min',
            text: 'libs/require/text',
            templates: 'templates'
       }

});

require(['app'], function(App){
    App.start();
});

Et pour chaque fichier modèle/vue/routeur, j'inclus simplement l'espace de noms "jquery" au début du bloc "define" comme suit :

define([
    'jquery',
    'underscore',
    'backbone',
    'views/categoryview',
    'text!templates/category.html'
    ], function($, _, Backbone, CategoryView, categoryTemplate){
        // Here comes my code
});

Mais le jQueryUI n'a pas pu être utilisé dans ces fichiers. Y a-t-il un problème avec mon code ? Ou dois-je également inclure le "jqueryui" dans chaque bloc "define" ? Mais si j'inclus "jqueryui" dans le bloc "define", comment dois-je le nommer dans la fonction pour éviter un conflit de nom avec jquery ?

Answer 1

Bien que la réponse de kujakettu soit au moins partiellement correcte, j'ai également dû spécifier jQuery comme dépendance dans mon shim pour m'assurer que jQuery était chargé avant jQuery-UI.

par exemple

require.config({
    baseUrl: 'scripts/modules',
    paths:{
        jquery:'../libs/jquery',
        jqueryUI:"../libs/jquery-ui",
        underscore:'../libs/underscore',
        backbone:'../libs/backbone'
    },
    shim: {
        jqueryUI: {
            deps: ['jquery']
        },
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        waitSeconds: 15
    }
});

Answer 2

Un article assez ancien. Il y a un outil disponible pour convertir les fichiers jquery ui en version AMD, créé par jrburke. J'espère que cela vous sera utile !

Answer 3

Vous pouvez inclure tous les fichiers qui ne font que patcher un autre objet (comme jQuery UI) dans votre fichier principal comme suit (vous devez vous assurer que jQuery est chargé avant jQuery UI) :

require(['jquery', 'app', 'jqueryui'], function ($, App) { App.start(); });

Une autre approche consiste à inclure jQuery UI dans chaque module, comme vous l'avez déjà mentionné.

Personnellement, je préfère la première approche, même si elle cache des dépendances.

Answer 4

Regardez cette approche :

http://www.requirejs.org/jqueryui-amd/example/webapp/app.html

Answer 5

Les autres réponses sont un peu dépassées aujourd'hui. JQuery UI est livré avec le support AMD. Si vous voulez l'ensemble du projet, il suffit d'utiliser bower install jquery-ui puis de l'ajouter aux chemins d'accès. Aucune cale n'est nécessaire.

Si vous souhaitez charger un sous-ensemble de jQuery UI dont vous avez besoin dans votre application (tout en évitant de charger des éléments superflus), il vous suffit d'utiliser bower install jquery-ui pour obtenir l'ensemble, puis utilisez l'outil de construction RequireJS appelé r.js pour créer un paquet AMD contenant exactement les fichiers dont vous avez besoin.