web-dev-qa-db-fra.com

Comment utiliser jquery ui avec requirejs

Je souhaite utiliser la fonction addClass de jQuery UI dans mon application.

À côté, j’utilise le jQuery, le trait de soulignement, l’ossature principale avec les requirejs.

J'ai configuré l'interface utilisateur jQuery comme ceci:

require.config({

    deps: ["main"],

    paths: {
        "text": "lib/text"
        , "jquery": "lib/jquery"
        , "jquery-ui": "lib/jquery-ui"
        , "underscore": "lib/underscore"
        , "backbone": "lib/backbone"
        , "bootstrap": "lib/bootstrap"
        , "templates": "../templates"
    },

    shim: {
        "jquery-ui": {
            exports: "$",
            deps: ['jquery']
        },
        "underscore": {
            exports: "_"
        },
        "backbone": {
            exports: "Backbone",
            deps: ["underscore", "jquery"]
        },
        "bootstrap": ['jquery']
    }

});

Dans l'application je fais:

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
    $('div').addClass('white');
});

Malheureusement, cela ne concerne que la addClass normale et non l'animation de l'interface utilisateur jQuery.

PS: J'utilise l'édition complète de jQuery.

javascriptjquery-uirequirejs
39
bodokaiser

Vous devez inclure jquery-ui:

define(['jquery-ui', 'backbone'], function() {
    $('div').addClass('white');
});

jquery devrait être requis automatiquement car il s'agit d'une dépendance de jquery-ui

En outre, aucun de ces scripts ne renvoie quoi que ce soit, mais leurs variables sont affectées à l'objet window. Pas besoin de les assigner.

34
Austin

essayer

define(['jquery', 'jquery-ui', 'underscore', 'backbone'], function($, ui, _, Backbone) {
    // $.ui should be defined, but do
    // $.ui = ui if its not
    $('div').addClass('white');
});
3
nickaknudson

Parfois, vous n'avez besoin que d'une petite sous-section de l'interface utilisateur jQuery. Par exemple, j'ai récemment eu besoin de triable, mais si j'essayais de tout charger, il y avait un conflit entre $.button() sur jquery-ui et $.button() dans bootstrap. jQuery UI étant désormais livré avec le support AMD, j'ai donc utilisé l'outil de compilation r.js de RequireJS pour générer exactement le sous-ensemble dont j'avais besoin.

0
hendrixski