0

我正在使用带有延迟加载插件的 Backbone、Undersocre、jquery 和Requirejs。在 main.js 中，我使用 shim 来加载这个插件，如下所示

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'

我在哪里犯错

更新

我将垫片更改为跟随

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

但它仍然无法正常工作，这一次它没有显示任何错误。

更新 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
    };

我猜这是奇怪的行为。这是问题还是它在我的代码中的其他地方？请帮我

4

1 回答 1

2

shim您应该像使用骨干一样在配置中声明延迟加载插件。我假设lazyload没有commonjs-style export/define，你需要使用shim配置来声明它。

看看这个问题添加jquery插件

更新：

检查这个 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);
});
于 2013-02-24T09:38:03.750 回答