Using isotope with requirejs and jquery

Question

I've read the documentation about Isotope supporting RequireJs but I've inherited a site that uses RequireJS which is set up in a slightly different way, and I'm struggling to get my head around how to get Isotope and RequireJS to work together. This is my first encounter with RequireJS.

The set-up is like this:

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();

});

Each time a new piece of functionality is added to the website, a new self-contained JavaScript file is created. In my case I need a new module which uses Isotope for the layout, so I've created a js file like this:

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

Then I've modified the Require configuration above, so it now looks like this:

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();

});

However, still this doesn't work - it just throws an exception on the website whereby undefined is not a function is returned where I call .isotope.

In the Isotope documentation (linked above) it says I need to reference 'jquery.bridget' in Require to get this working, but all of the examples I've found are set up in a different way, and seem to include the function which instantiates isotope in the RequireJS configuration directly, rather than setting it up ready to call that from my separate module script.

Can anyone advise how to get this working?

Many thanks.

Answer 1

The main thing throwing me out was that to get Isotope working with jQuery, it relies on the jquery.bridget plugin. This is bundled with Isotope, but I've been unable to reference it correctly. In the end I downloaded the plug-in as a stand alone javascript file and referenced that in the RequireJS configuration, and that has solved everything.

So the working code is:

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();

});

Then in my separate JavaScript module file I can instantiate Isotope as per normal:

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