Using SammyJs with RequireJs

Question

I'm having a bit of bother getting sammyjs to play with requirejs. Calling $.sammy fails and the error says that sammy is not defined in the jQuery namespace.

Here is my require config

require.config
  baseUrl: '/Scripts'
  waitSeconds: 10
  paths: 
    bootstrap:                './lib/bootstrap/bootstrap'            
    domReady:                 './lib/domReady/domReady'
    knockout:                 './lib/knockout/knockout-2.2.1.debug'
    jquery:                   './lib/jquery/jquery-1.9.1'
    sammy:                    './lib/sammy/sammy-0.7.4'
    myPage:                   './app/pages/myPage'
    myViewModel:              './app/viewModels/myViewModel'
  shim:
    bootstrap: 
      deps: ["jquery"]
    sammy:
      deps: ["jquery"]
      exports: "Sammy"

Here's my page javascript

require ['knockout', 'myViewModel', 'domReady!' ], ( ko, viewModel ) ->
  myViewModel = new viewModel       
  ko.applyBindings( myViewModel )

Here's my view model

define [ 'jquery', 'sammy', 'knockout' ], ( $, sammy, ko ) ->
  class myViewModel
    constructor: ( options ) ->
      self = @
      @sammypath = ko.observable( 1 )

      @router = $.sammy( -> 
        @get '#/', ( data ) ->
          self.sammypath( 1 )
      )
      @router.run()

However I get an error when I try to call $.sammy

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'

I guess it's something that's wrong with the require.config but to be honest I'm just not sure.

The sammy-0.7.4.js file is downloaded fine.

The sammy that is passed through to the define in the view model is not null

I stuck a break-point on the sammy file and it gets hit and recognizes that it's an AMD module. I'm just not sure why it doesn't add itself to the jQuery namespace.

I double checked that the page was loaded correctly first but the domReady module takes care of that.

I'm also using coffeescript but I don't think that that should be an issue.

Answer 1

To get sammy to work I just drop the $. notation since I'm injecting it

@router = sammy( -> 
  @get( '#/', ( data ) ->
    self.sammypath( 1 )
  )
)

I can't seem to get $.sammy to work unfortunately. The RequireJs documentation has some hints as to how to get $.sammy to work perhaps

var require = {
    deps: ["some/module1", "my/module2", "a.js", "b.js"],
    callback: function(module1, module2) {
        //This function will be called when all the dependencies
        //listed above in deps are loaded. Note that this
        //function could be called before the page is loaded.
        //This callback is optional.
    }
};

It looks like I could use the callback to get this to work with something like this

var require = {
    deps: ["jquery", "sammy"],
    callback: ($, sammy) ->
      $.sammy = sammy
}

But I can't get this to play with the require.config, if someone knows how to sort this let me know! I've seen other people do something like this with knockout and ko and the mapping plugin ko.mapping

Answer 2

Sammy should play nicely with requirejs and already know that it needs the jquery module loaded.

I'm new to sammyjs, so perhaps the answers above were before sammy was amd compatible?

This is a snippet of the current sammyjs version, which shows that it should be ok with requirejs... at least I've not had any trouble with it.

(function(factory){
  // Support module loading scenarios
  if (typeof define === 'function' && define.amd){
    // AMD Anonymous Module
    define(['jquery'], factory);
  } else {
    // No module loader (plain <script> tag) - put directly in global namespace
    jQuery.sammy = window.Sammy = factory(jQuery);
  }
})(function($){

Here is an example of using it

define(["jquery", "../sammy-0.7.5.min"], function ($, Sammy) {


 Sammy('#main', function() {

        // define a 'get' route that will be triggered at '#/path'
        this.get('#/path', function() {
          // this context is a Sammy.EventContext
          this.$element() // $('#main')
              .html('A new route!');
        });
      }).run();

}