requireJS con JQuery, Masonry e ImagesLoaded: oggetto [oggetto oggetto] non ha alcun metodo 'imagesLoaded'

Question

RequireJS newbie qui. Cercando di convertire un codice JQuery, ho lavorato bene nel vecchio modo di lavorare con RequireJS.

L'intestazione della mia pagina carica tre file JS tramite tag di script - require.js stesso, my require.cfg.js e boot/main.js con la funzionalità specifica del sito.

require.cfg.js rilevanti estratto:

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

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

}); 

}); 

posso confermare che tutti questi file JS sono stati trovati e caricati dal browser. E confermo che se faccio:

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

la Massoneria e ImagesLoaded variabili siano impostate correttamente .... ma io non voglio procedere w/o jQuery

Ma quando provo a chiamare. imagesLoaded() e .masonry() sull'oggetto contenitore di JQuery, ottengo:

TypeError Uncaught: Object [object Object] non ha un metodo 'imagesLoaded'

e se io commento la linea imagesLoaded, Ottengo:

Uncaught TypeError: Object [object Object] non ha un metodo 'muratura'

Non sei sicuro di quello che sto facendo male qui ...? Da quanto ho letto in altre domande StackOverflow, il codice mi sembra corretto ...?

Grazie!

Aggiornamento:

Se io uso questo codice il modo non JQuery in questo modo, funziona:

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

Answer 1

Prova a modificare:

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 2

Prova definire esportazioni ogni plugin nello spessore ...

, 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 3

Ok, penso di avere la risposta al tuo problema (e mio!).

Se stai installando le versioni ospitate su github, probabilmente stai installando la versione "vanilla", non il plugin jquery. Questo è quello che farai se installerai via bower, ad esempio, che è quello che stavo facendo.

Ecco quello che ho trovato con una ricerca sul pergolato:

% 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 e jquery.masonry indicano tutti la stessa fonte (in due luoghi diversi), e non è il plugin jQuery è solo la versione "vanilla" della muratura.

Invece, è sufficiente scaricare da here ed estrarre il file jquery.masonry.js, ma nel percorso delle risorse e aggiungere uno spessore per esso con una dipendenza su jquery.

Dopo aver fatto tutto questo, dovrebbe funzionare. Ovviamente poiché non è installato tramite bower, non è possibile gestire le dipendenze come faresti con altri pacchetti Bower. Onestamente non capisco cosa sta succedendo, ma sembra un problema da parte del manutentore del pacchetto.

Spero che questo aiuti.

AGGIORNAMENTO: Sebbene quanto sopra funzioni, si noti che la versione scaricata da meta.metafizzy.co è piuttosto vecchia e dipende da una versione obsoleta di jquery. Penso che andrò con la versione vanilla, sembra che il plugin non venga mantenuto.

Answer 4

Provare a utilizzare jquery-bridget: https://github.com/desandro/jquery-bridget per convertire la muratura in un plug-in jQuery. Ho creato un nuovo file js che viene caricato da requirejs per assicurarsi che sia convertita prima che l'applicazione inizia a correre:

//masonry-config.js: 
'use strict' 

define(['jquery-bridget', 'masonry'], function(Bridget, Masonry){ 
    Bridget('masonry', Masonry); 
}); 

Poi, nel mio file requirejs

//main.js 
require.config({ 
    paths: { 
     'masonry-config': 'masonry-config' 
     ..... 
    }, 
    shim: { 
     'angular-masonry': ['angular', 'masonry'], 
     'angular' : { 
     deps: ['imagesloaded', 'masonry-config'], 
     exports: 'angular' 
     }, 
     'masonry': ['imagesloaded'], 
    } 
} 

Questo è per la mia app utilizzando angolare e angolare -Masoneria (con la muratura) quindi potresti aver bisogno di un po 'di configurazione, ma spero che ti dia qualche idea.