CODEWITHSUNDEEP
jqueryjquery-pluginsbackbone.jsrequirejsamd
Om3ga
Om3ga

Reputation: 32823

jquery plugin with requirejs issue

I am using Backbone, Undersocre, jquery and Requirejs with lazyload plugin. Inside main.js I am using shim to load this plugin like follow

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

Then below is one of my view where I want to use this plugin

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;
});

But this gives me following error

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

Where am I making mistake

Update

I changed my shims to following

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

And view to following

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;
});

But it is still not working and this time it does not show any error.

UPDATE 2

When I do console.log(Lazyload) inside my view's addLazyLoad function the it shows function which starts like this

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

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

whereas the plugin data starts like this

(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
    };

This is strange behavior I guess. Is this the problem or it lies somewhere else in my code? Please help me

Upvotes: 0

Views: 3044

Answers (1)

neeebzz
neeebzz

Reputation: 11538

you should declare the lazyload plugin inside the shim config like you did with backbone. I assume lazyload doesn't have commonjs-style export/define and you need to use the shim config to declare it.

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

UPDATE:

Check this jsfiddle. It's working for me using the following code: 

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);
});

Upvotes: 2

Related Questions