對象沒有方法錘（Hammer，Backbone，RequireJS）

我正在嘗試在我的Backbone應用程序中集成Hammer JS，但是我收到錯誤：Object [object Object]沒有方法'hammer'。我在RequireJS中使用Backbone。這個錯誤發生在我撥打方法hammer（）在我的這個$ el。對象沒有方法錘（Hammer，Backbone，RequireJS）

下面是我正在使用的代碼。

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

難道我做錯了什麼？

來源

2014-01-23 Rido

請'的console.log（$ fn.hammer）檢查;'之前調用它。 –

我只是試過，我得到「undefined」 – Rido

不好，請檢查這個https://github.com/EightMedia/hammer.js/issues/331它有2 jsfiddle與工作插件。 –

我看到錘兩種可能的jQuery插件：

One包括錘它。
Another其中不是包括錘子在裏面。

我建議你使用第二個。

爲什麼？首先，因爲你在你的問題中顯示的設置在自己的文件中有Hammer（hammer.min），所以使用插件也包含Hammer是沒有意義的。但其次，更重要的是，在包含Hammer的插件版本中查看代碼時，我以脆弱的方式使用對define的調用來看它。基本上，如果它有效，那只是運氣。（並且有bug支持我的評估報告：here和here。）

因此使用獨立版本（不包括Hammer）似乎是最安全的方法。您將不得不放棄您的墊片jQueryHammer，因爲正如您通過查看代碼所看到的，該插件將檢測到AMD環境（其中RequireJS是）並且將調用define。您只需確保模塊名稱hammer和jquery分別解析爲包含Hammer的文件和包含jQuery的文件。

來源

2014-01-23 17:17:54 Louis

感謝尤金我解決了我的問題。

這裏是我的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(); 
});

來源

2014-01-24 11:40:15 Rido

對象沒有方法錘（Hammer，Backbone，RequireJS）

回答

相關問題