将同位素与 requirejs 和 jquery 一起使用

Question

我已经阅读了关于 Isotope 支持 RequireJs 的 documentation，但我继承了一个使用 RequireJS 的站点，该站点的设置方式略有不同，我正在努力弄清楚如何获取 Isotope 和RequireJS 一起工作。这是我第一次接触 RequireJS。

设置是这样的：

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

});

每次向网站添加新功能时，都会创建一个新的自包含 JavaScript 文件。就我而言，我需要一个使用同位素进行布局的新模块，所以我创建了一个这样的 js 文件：

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

然后我修改了上面的Require配置，现在看起来是这样的：

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

});

但是，这仍然不起作用 - 它只是在网站上引发异常，在我调用 .isotope 的地方返回 undefined is not a function。

在 Isotope 文档（上面链接）中，它说我需要在 Require 中引用“jquery.bridget”才能使其正常工作，但我发现的所有示例都以不同的方式设置，并且似乎包括直接在 RequireJS 配置中实例化同位素的函数，而不是将其设置为准备好从我的单独模块脚本中调用它。

谁能建议如何让它工作？

非常感谢。

Answer 1

让我失望的主要是要让 Isotope 与 jQuery 一起工作，它依赖于 jquery.bridget 插件。这与同位素捆绑在一起，但我无法正确引用它。最后，我将插件下载为一个独立的 javascript 文件，并在 RequireJS 配置中引用了它，这样就解决了所有问题。

所以工作代码是：

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

});

然后在我单独的 JavaScript 模块文件中，我可以照常实例化 Isotope：

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