对象没有方法Hammer(Hammer、Backbone、RequireJS)

envsm3lx  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(135)

我尝试将Hammer JS集成到我的Backbone应用程序中,但我收到错误消息:Object [object Object]没有方法'hammer'。我正在使用Backbone和RequireJS。当我在我的this.$el上调用方法**hammer()**时发生错误。
这是我使用的代码。

应用程序.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();
});

查看.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;
});

我做错什么了吗?

zdwk9cvp

zdwk9cvp1#

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

  • One,其中包括Hammer。
  • Another,* 不 * 包括Hammer。

我建议你用第二个。
为什么?首先,因为您在问题中显示的设置在它自己的文件中有Hammer(hammer.min)所以使用一个 * 也 * 包含Hammer的插件是没有意义的。但是第二,也是更重要的,看看包含Hammer的插件版本中的代码,我发现它以一种脆弱的方式调用define。基本上,如果它能工作,那只是运气。(有错误报告支持我的评估:和here中的一个或多个。)
所以使用独立版本(不包括Hammer)似乎是最安全的方法。您必须放弃jQueryHammer的shim,因为通过查看代码可以看到,该插件将检测AMD环境(RequireJS是),并将调用define。您只需要确保模块名称hammerjquery分别解析为包含Hammer的文件和包含jQuery的文件。

bqucvtff

bqucvtff2#

多亏了尤金我才解决了我的问题。
下面是我的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();
});
ukqbszuj

ukqbszuj3#

1.安装npm i锤子
1.添加到package.json中===〉“hammerjs”:“^2.0.8”,“@类型/锤子”:“^2.0.36”,“类型”:[“hammerjs”,“Jasmine”,“jasminewd 2”,“节点”,“q”,“ selenium 化Web驱动程序”]
1.添加导入'hammerjs';主.ts文件
1.如果仍有问题,请用途:npm --强制****npm安装

相关问题