Use jQuery plugin with Backbone and Requirejs

Question

I'm working with backbone+requirejs+jquery and I have a problem with jquery plugin loading in my current html page (backbone html template precisly).

There is my require configuration:

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

In my layout html page I have:

<script type='text/javascript' src='/js/jquery/jquery.camera.js'></script>

and in my template page I have:

<script type="text/javascript">
  jQuery(function() {

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

Finally my browser mesg :

Uncaught TypeError: Object [object Object] has no method 'camera'

Do you have any idea?

In the same time I have another question, what is the best way to include some js code in our current page with backbone,requirejs, etc.

Thanks :)

Can you provide full code? You can use jsfiddle.net for this. It seems that jquery camera plugin isn't loaded. The best place where to place your JS scripts is at the bottom of your page because of the way browsers download components. — maxwell
– maxwell, Commented Oct 11, 2012 at 14:04

Cristiano Fontes · Accepted Answer · 2015-08-18 18:28:21Z

18

I solved a similar issue (Jquery.cookie) like this, but my problem was that Jquery was being loaded and then Jquery.cookie was being included but require already had JQuery as a Static resource.

So like this I pass Jquery.Cookie to the application and it inserts jquery.cookie in my application scope only.

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

and then in the main App class I added

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

After this I was able to find jquery cookie.

BTW: there is no need to import JQuery.camera in your html if you are using Require.js to fetch it, unless you use it outside your Require.js scope.

edited Aug 18, 2015 at 18:28

answered Oct 11, 2012 at 14:13

Cristiano Fontes

5,0886 gold badges46 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

skcin7 Over a year ago

Thanks so much. I've been searching the web for ~2 hours trying to figure this out. The only thing I needed to do was add 'jquery.cookie' to the main App class. However I feel like there should be a better way to load jQuery plugins, I don't really like that there are 5 parameters going in to require() and only 4 being sent to the function... but this implementation works perfectly for now. Thank you!

Steve P Over a year ago

you don't even need the shim config for jquery-cookie since it is an AMD-compatible module and does it's own require of jquery

1nfiniti Over a year ago

Amazing. They should really document this on the require.js site... I tried something close to this, but wasn't putting the non-exporting module at the end of my dependencies list and was screwing up the ordering of my other deps. Thanks, +1

Collectives™ on Stack Overflow

Use jQuery plugin with Backbone and Requirejs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related