requireJS с JQuery, Masonry и & ImagesLoaded: у Object [object Object] нет метода 'imagesLoaded'
Требуется JS новичок здесь. Пытаясь преобразовать некоторый код 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 установлены правильно .... но я нене хочу продолжать без jQuery
Но когда я пытаюсь вызвать .imagesLoaded () и .masonry () для объекта контейнера JQuery, я получаю:
Uncaught TypeError: Object [object Object] не имеет метода 'imagesLoaded»
И если я закомментирую строку imagesLoaded, я получу:
Uncaught TypeError: Object [object Object] не имеет метода 'кирпичная кладка'
Не уверен, что яя здесь не так делаю ...? Из того, что яЧитал в других вопросах StackOverflow, код выглядит правильно для меня ...?
Спасибо!
Обновить:
Если я использую этот код не-JQuery так, он работает:
var container = document.querySelector('#container');
imagesLoaded(container, function() {
var msnry = new Masonry( container, {
itemSelector: '.item',
});
});