Snippet – Fixing Errors When Using jQuery, Sammy, RequireJS

Sammy.jsWhile I was trying out Sammy.js with Require.js I kept getting several errors, among them:

  • jQuery is not defined
  • Uncaught TypeError: Object function ( selector, context ) { // The jQuery object is actually just the init constructor ‘enhanced’ return new jQuery.fn.init( selector, context, rootjQuery ); } has no method ‘sammy’

Here’s a code sample that shows how you can get the two to work together.

Sammy Config

The first trick was to create a shim for Sammy in the require.config. As of 0.7.4, Sammy does not define itself, although it does define itself as an AMD Anonymous Module requiring jquery. But for my app, jQuery and Sammy need to be loaded by RequireJS. So you can use a shim.

If you do not express the dependencies, you will likely get loading errors since RequireJS loads scripts asynchronously and out of order for speed.

jQuery Require is Optional

You can then require SammyJS in your require statement without needing jQuery. $ is already loaded as a dependency.

Note that you do not call $.sammy to when

Sample Page

Here’s the complete sample. Sammy, Require, and jQuery are all in the Scripts folder.

Sample Code

Sample Code for this is available in the DevDays repository on GitHub: https://github.com/devdays/single-page-app/tree/master/Sammy

Advertisements