在requirejs和jquery中使用同位素

Question

我读过documentation关于支持RequireJs的同位素，但我继承了一个使用RequireJS的网站，它的设置方式稍有不同，我努力想方设法让我的头让同位素和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.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上的异常。

在同位素文档（上面链接），它说我需要引用'jquery.bridget'在要求得到这个工作，但我发现的所有例子都设置了不同的方式，似乎包括直接在RequireJS配置中实例化同位素的函数，而不是设置它准备从我的单独模块脚本中调用它。

任何人都可以建议如何让这个工作？

非常感谢。

Answer 1

让我失望的主要原因是为了让Isotope与jQuery一起工作，它依赖于jquery.bridget插件。这与Isotope捆绑在一起，但我一直无法正确引用它。最后，我将该插件作为独立的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模块文件我可以实例同位素按正常：

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