Usando isótopo con requirejs y jquery

He leído el documentación sobre Isotope que admite RequireJs, pero heredé un sitio que usa RequireJS, que está configurado de una manera ligeramente diferente, y estoy luchando por entender cómo hacer que Isotope y RequireJS funcionen juntos. Este es mi primer encuentro con RequireJS.

La puesta a punto es así:

require.config({
    paths: {
        jquery: 'libs/jquery-1.11.0',
        jqueryUI: 'libs/jquery-ui-1.11.1',
        datepickerModule: 'modules/datepicker-module',
        gridsetModule: 'plugins/gridset-overlay',
        waypoints: 'plugins/waypoints',
        booking: 'modules/book-widget',
        mobileNav: 'modules/mobile-nav'
    },
    shim: {
        'booking': ['waypoints']
    }

});

/* -------------------------------------------------------------------------- */
/* ---------- Initialize app ------------------------------------------------ */
/* -------------------------------------------------------------------------- */

require(['jquery', 'jqueryUI', 'base', 'waypoints', 'booking', 'datepickerModule', 'gridsetModule', 'mobileNav'], function($, jqueryUI, base) {
    'use strict';

    /* ---------- Global modules -------------------------------------------- */
    base.init();

});

Cada vez que se agrega una nueva funcionalidad al sitio web, se crea un nuevo archivo JavaScript independiente. En mi caso, necesito un nuevo módulo que use Isotope para el diseño, así que creé un archivo js como este:

define(['jquery'], function () {
    'use strict';
    $('#container').isotope();
});

Luego modifiqué la configuración Requerir anterior, por lo que ahora se ve así:

require.config({
    paths: {
        jquery: 'libs/jquery-1.11.0',
        jqueryUI: 'libs/jquery-ui-1.11.1',
        datepickerModule: 'modules/datepicker-module',
        gridsetModule: 'plugins/gridset-overlay',
        waypoints: 'plugins/waypoints',
        isotope: 'plugins/isotope.pkgd',
        booking: 'modules/book-widget',
        mobileNav: 'modules/mobile-nav'
    },
    shim: {
        'booking': ['waypoints'],
        'isotope': ['jquery']
    }

});

/* -------------------------------------------------------------------------- */
/* ---------- Initialize app ------------------------------------------------ */
/* -------------------------------------------------------------------------- */

require(['jquery', 'jqueryUI', 'base', 'waypoints', 'booking', 'datepickerModule', 'gridsetModule', 'mobileNav', 'isotope'], function($, jqueryUI, base) {
    'use strict';

    /* ---------- Global modules -------------------------------------------- */
    base.init();

});

Sin embargo, aún así esto no funciona, simplemente genera una excepción en el sitio web mediante la cual undefined is not a function se devuelve donde llamo .isotope.

En la documentación de Isotope (vinculada arriba) dice que necesito hacer referencia a 'jquery.bridget' en Require para que esto funcione, pero todos los ejemplos que he encontrado están configurados de una manera diferente y parecen incluir la función que crea instancias de isótopo en la configuración de RequireJS directamente, en lugar de configurarlo para llamarlo desde mi script de módulo separado.

¿Alguien puede aconsejar cómo hacer que esto funcione?

Muchas gracias.

preguntado Oct 07 '14, 14:10

1 Respuestas

Lo principal que me descartó fue que para que Isotope funcione con jQuery, se basa en el jquery.bridget enchufar. Esto se incluye con Isotope, pero no he podido hacer referencia a él correctamente. Al final, descargué el complemento como un archivo javascript independiente y lo mencioné en la configuración de RequireJS, y eso resolvió todo.

Así que el código de trabajo es:

require.config({
    paths: {
        jquery: 'libs/jquery-1.11.0',
        jqueryUI: 'libs/jquery-ui-1.11.1',
        datepickerModule: 'modules/datepicker-module',
        gridsetModule: 'plugins/gridset-overlay',
        waypoints: 'plugins/waypoints',
        isotope: 'plugins/isotope.pkgd',
        booking: 'modules/book-widget',
        mobileNav: 'modules/mobile-nav',
        bridget: 'plugins/jquery.bridget'
    },
    shim: {
        'booking': ['waypoints'],
        'isotope': ['jquery']
    }

});

/* -------------------------------------------------------------------------- */
/* ---------- Initialize app ------------------------------------------------ */
/* -------------------------------------------------------------------------- */

require(['jquery', 'jqueryUI', 'base', 'waypoints', 'booking', 'datepickerModule', 'gridsetModule', 'mobileNav', 'isotope', 'bridget'], function($, jqueryUI, isotope, base) {
    'use strict';

    /* ---------- Global modules -------------------------------------------- */
    base.init();

});

Luego, en mi archivo de módulo de JavaScript separado, puedo crear una instancia de Isotope como de costumbre:

define(['jquery', 'isotope'], function () {
    'use strict';
    $('#container').isotope();
});

Respondido 07 Oct 14, 20:10

Señor, me salvó el día. Me estaba tirando del pelo y no podía darme cuenta de que era Bridget, funcionó después de que lo cargué de forma independiente. - catalinberta

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.