0

私はlazyloadプラグインで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',
  }
});

次に、このプラグインを使用したい私の見解の1つを以下に示します。

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

バックボーンで行ったように、構成内でlazyloadプラグインを宣言する必要がありますshim。lazyloadにはcommonjsスタイルのエクスポート/定義がなく、shimconfigを使用して宣言する必要があると思います。

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 に答える