requireJS with JQuery，imagesLoaded，& ImagesLoaded: Object [ Object ]没有方法'imagesLoaded‘

Question

这里是RequireJS新手。在尝试转换一些JQuery代码时，我用旧的方式工作得很好，可以工作w/ 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']
}

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文件都是由浏览器找到和加载的。我确认如果我这么做了

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

正确设置了砌体和ImagesLoaded变量.但我不想继续做jQuery

但是，当我试图对.imagesLoaded()和.masonry()调用JQuery容器对象时，我得到：

Uncaught :对象没有方法'imagesLoaded'

如果我评论一下imagesLoaded的话，我会得到：

Uncaught :对象没有“砖石”方法

不知道我做错了什么.？根据我在其他StackOverflow问题中所读到的，这些代码在我看来是正确的.？

谢谢!

更新：

如果我像这样以非JQuery的方式使用这段代码，它可以工作：

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

Answer 1

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

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

Answer 2

试一试：

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',});
        });

});

});

Answer 3

好的，我想我对你的问题有答案(也是我的！)

如果您正在安装github上的版本，那么您可能安装的是"vanilla“版本，而不是jquery插件。举个例子，如果你是通过保龄球安装的话，这就是你要做的，我就是这么做的。

下面是我在保龄球上找到的东西：

% bower search masonry
# jquery-masonry git://github.com/desandro/masonry
# masonry git://github.com/desandro/masonry.git
# $.masonry git://github.com/tysoncadenhead/masonry
# angular-masonry git://github.com/passy/angular-masonry.git
# jquery.masonry git://github.com/tysoncadenhead/masonry.git

AFAICT、jquery-masonry、$.masonry和jquery.masonry都指向同一个源(位于两个不同的位置)，而不是jquery插件--它只是砌体的“普通”版本。

相反，只需从这里下载并解压缩文件jquery.masonry.js，但它位于您的资产路径中，并为它添加一个带有依赖于jquery的空间。

在你做完所有这些之后，它就能工作了。当然，因为它不是通过bower安装的，所以您不能像使用其他bower包那样管理依赖关系。老实说，我不明白发生了什么事，但这似乎是一个问题的包-维护方面。

希望这能有所帮助。

更新:尽管上面的方法有效，但请注意，从meta.metafizzy.co下载的版本非常老，并且依赖于过时的jquery版本。我想我只是想使用香草版本，似乎插件没有被维护。