requireJS与JQuery，Masonry和& ImagesLoaded:对象[object Object]没有方法'imagesLoaded' [英] requireJS with JQuery, Masonry, & ImagesLoaded: Object [object Object] has no method 'imagesLoaded'

问题描述

RequireJS新手在这里.尝试转换一些JQuery代码时，我在使用RequireJS的旧方式下可以正常工作.

RequireJS newbie here. Trying to convert some JQuery code I had working fine in the old way to work w/ RequireJS.

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

Header of my page loads three JS files via script tags -- require.js itself, my require.cfg.js, and boot/main.js with the site-specific functionality.

相关require.cfg.js摘录:

Relevant require.cfg.js excerpt:

,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']
}

boot/main.js:

boot/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文件.我确认如果这样做:

I can confirm that all of these JS files are being found and loaded by the browser. And I confirm that if I do:

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

Masonry和ImagesLoaded变量设置正确....但是我不想继续使用jQuery

the Masonry and ImagesLoaded variables are set correctly.... but I don't want to proceed w/o jQuery

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

But when I try to call .imagesLoaded() and .masonry() on the JQuery container object, I get:

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

如果我将imagesLoaded行注释掉，我得到:

And if I comment out the imagesLoaded line, I get:

未捕获的TypeError:对象[object Object]没有方法砌体"

不确定在这里我在做什么错吗...?从我在其他StackOverflow问题中所读的内容来看，代码对我来说看起来是正确的...?

Not sure what I'm doing wrong here...? From what I've read in other StackOverflow questions, the code looks correct to me...?

谢谢！

更新:

如果我像这样通过非JQuery方式使用此代码，则它会起作用:

If I use this code the non-JQuery way like so, it works:

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

推荐答案

也尝试为垫片中的每个插件定义导出...

Try defining exports for each plugin in the shim too...

, paths: {
    boot: 'src/boot'
    , jquery: 'bower_components/jquery'
    , masonry: 'bower_components/masonry',
    , imagesloaded: 'bower_components/imagesloaded'
}
, shim: {
    jquery: {
        exports: 'jQuery'
    }
    , masonry: {
        deps : ['jquery'],
        exports : 'jQuery.masonry'
    }
    , imagesloaded: {
        deps : ['jquery'],
        exports : 'jQuery.imagesLoaded'
    }
}

这篇关于requireJS与JQuery，Masonry和& ImagesLoaded:对象[object Object]没有方法'imagesLoaded'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！