Question

我正在尝试将Hammer JS集成到我的Backbone应用程序中，但我收到错误：对象[object Object]没有方法'锤'。我正在使用Backbone和RequireJS。当我在 this。$ el 上调用方法 hammer（）时会发生错误。

这是我正在使用的代码。

app.js

require.config({

    baseUrl: 'js/libs',

    paths: {
        // Directories
        collections: '../collections',
        models: '../models',
        views: '../views',
        templates: '../../templates',

        // Files
        dualStorage: 'backbone.dualStorage',
        hammer: 'hammer.min',
        jQueryHammer: 'jquery.hammer.min',
        jQueryAnimate: 'jquery.animate-enhanced.min'
    },

    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'jQueryHammer': {
            deps: ['jquery', 'hammer']
        },
        'dualStorage': {
            deps: ['underscore', 'backbone']
        }
    }
});

require([
    'jquery',
    'backbone',
    'hammer',
    'jQueryHammer',
    '../router'
], function($, Backbone, Hammer, jQueryHammer, Router) {
    var router = new Router();
});

view.js

define([
    'jquery',
    'underscore',
    'backbone',
    'text!templates/avatar/StyleAvatarTemplate.html',
    'hisrc',
    'hammer',
    'jQueryHammer',
    'jQueryAnimate'
], function($, _, Backbone, styleAvatarTemplate) {

    var StyleAvatarView = Backbone.View.extend({

        initialize: function(options) {
            this.gender = options.gender;
            this.age = options.age;
        },

        events: {
            "swipe": "changeStyle"
        },

        changeStyle: function(e) {
            alert('test');
            console.log(e);
        },

        render: function() {
            var data = {
                collection: this.collection.models,
                gender: this.gender,
                age: this.age,
                _: _
            };

            this.template = _.template(styleAvatarTemplate, data);

            this.$el.html(this.template);
            this.$el.hammer();

            return this;
        }

    });

    return StyleAvatarView;
});

我做错了吗？

Answer 1

我看到两个可能的Hammer jQuery插件：

One其中包括Hammer。
Another 不包含Hammer。

我建议你使用第二个。

为什么呢？首先，因为您在问题中显示的设置将Hammer放在其自己的文件中（hammer.min）所以使用还包含Hammer的插件没有任何意义。但其次，更重要的是，查看包含Hammer的插件版本中的代码，我看到它使用脆弱的方式调用define。基本上，如果它有效，那就是运气。（并且有一些错误报告支持我的评估：here和here。）

所以使用独立版本（不包括Hammer）似乎是最安全的方法。您将不得不丢弃jQueryHammer的垫片，因为正如您通过查看代码所看到的，该插件将检测到AMD环境（RequireJS是）并将调用define。您只需要确保模块名称hammer和jquery分别解析为包含Hammer的文件和包含jQuery的文件。

Answer 2

感谢尤金，我解决了我的问题。

这是我的app.js配置正确：

require.config({

    baseUrl: 'js/libs',

    paths: {
        // Directories
        collections: '../collections',
        models: '../models',
        views: '../views',
        templates: '../../templates',

        // Files
        'dualStorage': 'backbone.dualStorage',
        'hammer-jquery': 'jquery.hammer', // jQuery plugin without Hammer
        'jQueryAnimate': 'jquery.animate-enhanced.min'
    },

    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'dualStorage': {
            deps: ['underscore', 'backbone']
        }
    }
});

require([
    'jquery',
    'backbone',
    'hammer',
    '../router',
    'hammer-jquery'
], function($, Backbone, Hammer, Router) {
    console.log(Hammer);
    console.log($.fn.hammer);
    var router = new Router();
});

对象没有方法锤子（Hammer，Backbone，RequireJS）

2 个答案: