javascript - require jquery

¿Cómo uso jquery ui con requirejs?

Question

Quiero usar la función addClass jQuery UI en mi aplicación.

Además estoy usando el jQuery normal, el guión bajo, la columna vertebral y todos los niveles junto con requirejs.

He configurado la interfaz de usuario de jQuery así:

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

});

En la aplicación que hago:

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

Lamentablemente, esto solo tiene el addClass normal, no el animado de jQuery UI.

PD: utilizo la edición jQuery completa.

Answer 1

A veces solo necesitas una pequeña subsección de jQuery UI. Por ejemplo, hace poco necesitaba ordenar, pero si traté de cargar todo, entonces tuve un conflicto entre $.button() en jquery-ui y $.button() en bootstrap. jQuery UI ahora viene con soporte de AMD, así que utilicé la herramienta de compilación r.js de RequireJS para construir exactamente el subconjunto que necesitaba.

Answer 2

Necesitas incluir jquery-ui:

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

jquery debería ser requerido automáticamente ya que es una dependencia de jquery-ui

Además, ninguno de estos scripts devuelve nada, pero sus variables se asignan al objeto de ventana. No es necesario asignarlos.

Answer 3

tratar

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