JQuery、Masonry、＆ImagesLoadedでのJJS：オブジェクト[objectオブジェクト]には 'imagesLoaded'メソッドがありません

Question

ここにJSC初心者が必要です。私は以前の方法でうまく動作していたJQueryコードを、RequireJSを使って変換しようとしました。

私のページのヘッダーは、スクリプトタグ（require.js自体、require.cfg.js、およびboot/main.js）に3つの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) { 

石積みや変数をImagesLoadedが正しく設定されている....しかし、私は、W/O jQueryの

続行する必要はありません。しかし、私は呼んしようとすると：。そして、私は私がしなければことを確認します

キャッチされない例外TypeError：：imagesLoaded（）とjQueryのコンテナオブジェクト上の.masonry（）は、私が手に私はimagesLoaded行をコメントアウト場合は、 'imagesLoaded [オブジェクト[オブジェクトのオブジェクト]が方法はありません

をそして、私は得る：

キャッチされない例外TypeError：オブジェクト[オブジェクトのオブジェクト]は何の方法「石工」

ない私がここで間違ってやっていることを確認していませんか...？私が他の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',}); 
     }); 

}); 

}); 

Answer 2

がために輸出を定義してくださいシムの各プラグインも...

, 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

私はあなたの問題（と私の！）に対する答えを持っていると思います。

githubでホストされているバージョンをインストールしている場合は、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は、すべての（2つの異なる場所で）同じソースを指している、それはそれだけだプラグインjqueryのではありません。ここで

は、私が亭で検索して見つけたものです石造りの "バニラ"バージョン。

代わりにhereからダウンロードしてファイルjquery.masonry.jsを抽出しますが、アセットのパスに入れて、jqueryに依存するシムを追加してください。

すべてを済ませたらうまくいくはずです。もちろん、バワーでインストールされていないので、他のバウアーパッケージと同じように依存関係を管理することはできません。私は正直に何が起こっているのか理解していませんが、パッケージ管理者側の問題のようです。

希望に役立ちます。

更新：上記は動作しますが、meta.metafizzy.coからダウンロードしたバージョンはかなり古く、古いバージョンのjqueryに依存することに注意してください。私はバニラバージョンに行くつもりだと思うが、プラグインが維持されていないようだ。

Answer 4

masonryをjqueryプラグインに変換するには、jquery-bridget：https://github.com/desandro/jquery-bridgetを使用してみてください。その後

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

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

私requirejsは、角と角使っ

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

これが私のアプリのためにあるファイルに：私は、アプリケーションが実行を開始する前に、それが変換されていることを確認するためにrequirejsによってロードされる新しいJSファイルを作成しました-masonry（石積みあり）だから少し異なって設定する必要があるかもしれないが、うまくいけばそれはあなたにいくつかのアイデアを与える。