requireJS with JQuery,Masonry,&ImagesLoaded:Object [object Object]没有方法'imagesLoaded'

Question

这里需要新手.试图转换一些JQuery代码我以旧的方式工作与RequireJS工作.

我的页面的标题通过脚本标记加载三个JS文件 - require.js本身,我的require.cfg.js,以及具有特定于站点的功能的boot/main.js.

相关的require.cfg.js摘录:

,paths: {
    'boot': 'src/boot'
    ,'jquery': 'lib/jquery.min'
    ,'jquery.masonry': 'lib/plugins/masonry.pkgd.min'
    ,'jquery.imagesloaded': 'lib/plugins/imagesloaded.pkgd.min'
}

,shim: {
    'jquery': {
        exports: 'jQuery'
    }
    ,'jquery.masonry': ['jquery']
    ,'jquery.imagesloaded': ['jquery']
}

开机/ main.js:

require([
'jquery',
'jquery.masonry',
'jquery.imagesloaded',
], function($) {

    // The following code worked just fine when I included it in the header of the page as-is
$(function() {

    var $container = $('#container');
    // This doesn't work
    $container.imagesLoaded(function() {
                    // Neither does this
            $('#container').masonry({itemSelector : '.item',});
        });

});

});

我可以确认浏览器正在找到并加载所有这些JS文件.我确认如果我这样做:

require([
'jquery',
'jquery.masonry',
'jquery.imagesloaded',
], function($, Masonry, ImagesLoad) {

Masonry和ImagesLoaded变量设置正确....但我不想继续w/o jQuery

但是当我尝试在JQuery容器对象上调用.imagesLoaded()和.masonry()时,我得到:

未捕获的TypeError:对象[object Object]没有方法'imagesLoaded'

如果我注释掉imagesLoaded线,我得到:

未捕获的TypeError:对象[object Object]没有方法'masonry'

不知道我在这里做错了什么......？从我在其他StackOverflow问题中看到的内容来看,代码对我来说是正确的......？

谢谢!

更新:

如果我使用这个代码非JQuery的方式,它的工作原理:

        var container = document.querySelector('#container');
        imagesLoaded(container, function() {
            var msnry = new Masonry( container, {
                itemSelector: '.item',
            });
        });

Answer 1

试试这个：

require([
'jquery',
'jquery.masonry',
'jquery.imagesloaded',
], function($, Masonry, ImagesLoad) {

    // The following code worked just fine when I included it in the header of the page as-is
$(function() {

    var $container = $('#container');
    // This doesn't work
    $container.imagesLoaded(function() {
                    // Neither does this
            $('#container').masonry({itemSelector : '.item',});
        });

});

});