Use jQuery plugin with Backbone and Requirejs

Question

I am working with backbone + requirejs + jquery and I have a problem loading the jquery plugin on my current html page (hbml hbml template).

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

On my html page layout page, I:

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

and on my template page I:

 <script type="text/javascript"> jQuery(function() { jQuery('#test').camera({ ... </script> 

Finally, my mesg browser:

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

Do you have any ideas?

At the same time, I have one more question: what is the best way to include some js code on our current base page, requirejs, etc.

Thanks:)

Answer 1

I solved a similar problem (Jquery.cookie) like this, but my problem was that Jquery loaded and then turned on Jquery.cookie, but that already required JQuery as a static resource.

So, I pass jQuery.Cookie to the application and only inserts jquery.cookie into the scope of my application.

 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 class of the application I added

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

After that, I was able to find a jquery cookie.

BTW : There is no need to import JQuery.camera into your html if you use Require.js to extract it, if you do not use it outside the Require.js scope.