jquery plugin with requirejs issue

Question

Я использую Backbone, Undersocre, jquery и Requirejs с плагином lazyload. Внутри main.js Я использую подкладку, чтобы загрузить этот плагин, как следовать

require.config({ 
    shim: { 
    'backbone': { 
     deps: ['vendor/underscore/underscore', 'jquery'], 
     exports: 'Backbone' 
    }, 
    lazyload: ['jquery', 'lazyload'] 
    }, 

    paths: { 
    text:  'vendor/text', 
    jquery:  'vendor/jquery.min', 
    lazyload: 'plugins/jquery.lazyload', 
    backbone: 'vendor/backbone/backbone', 
    } 
}); 

Тогда ниже один мой взгляд, где я хочу использовать этот плагин

define(['backbone', 'text!../../templates/movie.tpl'], function (Backbone, MovieTemplate)  { 
var Movie = Backbone.View.extend({ 
    className: 'boxone', 

    render: function() { 
     console.log(this.model.toJSON()); 
     this.$el.html(_.template(MovieTemplate, this.model.toJSON())).fadeIn(); 
     this.addLazyLoad(); 
     return this; 
    }, 

    addLazyLoad: function() { 
     this.$el.find('img.poster').lazyload(); //<-- here I am using lazyload plugin 
    } 
}); 

return Movie; 
}); 

Но это дает мне следующее ошибки

Uncaught TypeError: Object [object Object] has no method 'lazyload' 

Где я делаю ошибку, которую

Update

Я изменил свои прокладки на следующие

shim: { 
'backbone': { 
    deps: ['vendor/underscore/underscore', 'jquery'], 
    exports: 'Backbone' 
}, 
lazyload: { 
    deps: ['jquery'], 
    exports: 'jQuery.fn.lazyload' //<-- made change here 
} 
    }, 

И взгляд на следующие

define(['backbone', 'lazyload', 'text!../../templates/movie.tpl'], function (Backbone, LazyLoad, MovieTemplate) { //<-- Added lazyload here 
var Movie = Backbone.View.extend({ 
    className: 'boxone', 

    render: function() { 
     this.$el.html(_.template(MovieTemplate, this.model.toJSON())).fadeIn(); 
     this.addLazyLoad(); 
     return this; 
    }, 

    addLazyLoad: function() {; 
     console.log(LazyLoad); //<-- this does show plugin code in console 
     this.$el.find('img.poster').LazyLoad; //<-- now I am calling it like this 
    } 
}); 

return Movie; 
}); 

Но это все еще не работает, и на этот раз он не показывает ошибку.

UPDATE 2

Когда я console.log(Lazyload) внутри addLazyLoad функции с моей точки зрения в она показывает функцию, которая начинается как этот

function (options) { 
    var settings = { 
     threshold : 0, 
     failurelimit : 0, 
     event  : "scroll", 
     effect  : "show", 
     container : window 
    }; 

    if(options) { 
     $.extend(settings, options); 
    } 

в то время как данные плагин начинается как этот

(function($) { 

// on the iPad, the offset top value is exactly off by the window scroll top 
function getOffsetTop(element) { 

    var offsetTop = $(element).offset().top; 

    if (navigator.userAgent.match(/ipad/i)) { 
     offsetTop -= $(window).scrollTop(); 
    } 

    return offsetTop; 

} 

$.fn.lazyload = function(options) { 
    var settings = { 
     threshold : 0, 
     failurelimit : 0, 
     event  : "scroll", 
     effect  : "show", 
     container : window 
    }; 

Это странное поведение, я думаю. Это проблема или она находится где-то еще в моем коде? Пожалуйста, помогите мне

Answer 1

вы должны объявить плагин lazyload внутри конфигурации shim, как и с базой. Я предполагаю, что lazyload не имеет commonjs-style export/define, и вам нужно использовать конфигурацию shim, чтобы объявить ее.

take a look at this question for adding jquery plug-ins

UPDATE:

Check this jsfiddle. Он работает для меня, используя следующий код:

requirejs.config({ 
    shim: { 
     'jquery': [], 
     'jquery.lazyload': ["jquery"] 
    }, 

paths: { 
    'jquery': 'http://code.jquery.com/jquery-1.8.3', 
    'jquery.lazyload': "https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload" 
    } 
}); 

require(["jquery.lazyload"], function() { 
    console.log($("body").lazyload); 
});