使用jQuery插件与Backbone和Requirejs配合使用

7
我正在使用backbone+requirejs+jquery开发,并且在当前的html页面(精确地说是backbone的html模板)中加载jquery插件时遇到了问题。
这是我的require配置:
require.config({

  paths: {
    // ... some code about backbone config
    jquery: '/js/lib/jquery/jquery.min',
    'jquery.camera' : '/js/jquery/jquery.camera'
  },

  shim: {
    // ... some code about backbone config
    'jquery.camera': ['jquery']  
  }
});

在我的布局 HTML 页面中,我有:
<script type='text/javascript' src='/js/jquery/jquery.camera.js'></script>

在我的模板页面中,我有以下内容:
<script type="text/javascript">
  jQuery(function() {

    jQuery('#test').camera({
...
</script>

最后我的浏览器消息:
Uncaught TypeError: Object [object Object] has no method 'camera'

你有任何想法吗?
同时我还有另一个问题,使用backbone、requirejs等,在我们当前的页面中包含一些js代码的最佳方法是什么。
谢谢 :)

你能提供完整的代码吗? 你可以使用jsfiddle.net来实现。 似乎jquery相机插件没有加载。由于浏览器下载组件的方式,将JS脚本放置在页面底部是最佳选择。 - maxwell
1个回答

18

我解决了一个类似的问题(Jquery.cookie),但我的问题在于Jquery已经被加载,然后Jquery.cookie被包含,但是require已经将JQuery作为静态资源。

因此,我将Jquery.Cookie传递给应用程序,并且它会将jquery.cookie仅插入到我的应用程序范围内。

require.config({

  paths: {
      'async'           : 'libs/async'
      ,'jquery'         : 'libs/jquery'
      ,'underscore'     : 'libs/underscore'
      ,'backbone'       : 'libs/backbone'
      ,'text'           : 'libs/text'
      ,'jquery.cookie'  : 'libs/jquery.cookie'   // <-- cookie lives here
  }

  ,shim: {
    'jquery': {
      exports: '$'
    }
    ,'underscore': {
      exports: '_'
    }
    ,'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
    ,'jquery.cookie': {     //<-- cookie depends on Jquery and exports nothing
        deps: ['jquery']
    }
  }
});

然后在主要的App类中,我添加了:

require([
  'jquery'
  ,'underscore'
  ,'backbone'
  ,'mapApp'
  ,'jquery.cookie'   //<- this is the real trick !!!
],
  function ($, _, Backbone, App) {

在此之后,我能够找到jquery cookie。

顺便提一下:如果您使用Require.js来获取JQuery,请勿在html中导入JQuery.camera,除非您在Require.js范围之外使用它。


非常感谢。我已经在网上搜索了约2小时,试图弄清楚这个问题。我唯一需要做的就是将“jquery.cookie”添加到主要的App类中。然而,我觉得应该有更好的方法来加载jQuery插件,我并不喜欢传入require()中的5个参数,但是现在这种实现方式完美地运行。谢谢! - skcin7
你甚至不需要为jquery-cookie配置shim,因为它是一个AMD兼容模块,并且会自己要求jquery。 - explunit
太棒了。他们真的应该在require.js网站上记录这个......我尝试过类似的东西,但没有把非导出模块放在我的依赖列表的末尾,结果搞乱了其他依赖项的顺序。谢谢,点赞。 - 1nfiniti

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接