, JQuery, Masonry ve Images ile birlikteJS gerektirir: Nesne [object Object] 'imagesLoaded' yöntemine sahip değildir.

Question

RequireJS newbie here. Bazı JQuery kod dönüştürmek için çalışıyordum eski çalışma ile iyi çalışıyordum/RequireJS.

Sayfanın üstbilgisi komut dosyası etiketleri aracılığıyla üç JS dosyası yükler - require.js kendisi, require.cfg.js ve siteye özgü işlevlerle boot/main.js.

İlgili require.cfg.js alıntı:

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

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

}); 

}); 

Bunları JS tüm dosyaları bulundu ve tarayıcı tarafından yüklenen olduğunu teyit edebilir.

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

Duvarcılık ve ImagesLoaded değişkenler doğru ayarlanmış .... ama/jQuery

o

w devam etmek istemiyorum Ama aramaya çalıştığınızda: Ve Ben alsam onaylayın.

Yakalanmayan TypeError: imagesLoaded() ve JQuery konteyner nesne üzerinde .masonry(), ben olsun ben imagesLoaded satırını açıklama ise 'imagesLoaded' nesne [object Object] hiçbir yöntem vardır

ve Anladım:

Yakalanmayan TypeError: Nesne [object Object] hiçbir yöntem 'duvarcılık'

burada yanlış yapıyorum Değil emin ne var ...? Diğer StackOverflow sorularında okuduğumdan, kod bana doğru görünüyor ...?

Teşekkürler!

Güncelleme: Öyle gibi bu kodu olmayan JQuery yolu kullanırsanız

, çalışır:

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

Answer 1

yerine bu deneyin:

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

için ihracat tanımlayan deneyin her bir eklenti de şimşek ...

, 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

Tamam, sanırım sorununun cevabını aldım (ve benim!).

Github'da barındırılan sürümleri yüklüyorsanız, muhtemelen "vanilla" sürümünü yüklüyorsunuz, jquery eklentisi değil. Bower ile yüklerseniz, örneğin yaptığım şey budur. İşte

ben yığınlarının üzerinde bir arama ile buldum budur:

% 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 ve jquery.masonry tüm (iki farklı yerlerde) aynı kaynağa işaret ediyor ve bu jquery bu sadece eklentisi değil duvarın "vanilya" versiyonu.

Bunun yerine, sadece here indirmek ve dosyayı jquery.masonry.js çıkartabilir ancak sizin varlıklar yolunda ve jquery bir bağımlılık ile bunun için bir dolgu ekleyin.

Tüm bunları yaptıktan sonra, çalışması gerekir. Tabii ki bower ile kurulmadığından, diğer bower paketlerinde olduğu gibi bağımlılıkları da yönetemezsiniz. Açıkçası neler olup bittiğini anlamıyorum ama paketin bakıcısı tarafında bir problem gibi görünüyor.

Bu yardımcı olur umarım.

GÜNCELLEME: Yukarıdaki çalışmalara rağmen, meta.metafizzy.co adresinden yüklenen sürümün oldukça eski ve jquery'nin eski bir sürümüne bağlı olduğunu unutmayın. Ben sadece vanilya versiyonu ile gideceğim düşünüyorum, eklenti korunmuyor gibi görünüyor.

Answer 4

jquery-bridget kullanmayı deneyin: https://github.com/desandro/jquery-bridget masonry a jquery plugin dönüştürmek için. Sonra

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

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

benim requirejs açısal ve açısal kullanılarak

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

Bu benim uygulamaya yönelik olduğunu dosyası içinde: Ben Uygulama çalışırken başlamadan önce o dönüştürülür sağlamak için requirejs tarafından yüklenen yeni bir js dosyası oluşturduk -masonry (duvarla) böylece biraz farklı bir şekilde yapılandırmanız gerekebilir ama umarım size biraz fikir verir.