Verwendung von SammyJs mit RequireJs

Question

Ich habe ein wenig Probleme, sammyjs dazu zu bringen, mit requirejs zu funktionieren. Der Aufruf von $.sammy schlägt fehl und der Fehler besagt, dass sammy im jQuery-Namespace nicht definiert ist.

Hier ist meine require-Konfiguration

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"

Hier ist mein Seiten-Javascript

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

Hier ist mein ViewModel

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

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

Allerdings erhalte ich einen Fehler, wenn ich versuche, $.sammy aufzurufen

Uncaught TypeError: Object function ( selector, context ) 
{ // The jQuery object is actually just the init constructor 'enhanced' 
     return new jQuery.fn.init( selector, context, rootjQuery ); } 
hat keine Methode 'sammy'

Ich vermute, dass etwas mit der require.config nicht stimmt, bin aber ehrlich gesagt nicht sicher.

Die Datei sammy-0.7.4.js wird heruntergeladen.

Das sammy, das im define im ViewModel übergeben wird, ist nicht null

Ich habe einen Breakpoint in die sammy-Datei gesetzt und er wird getroffen und erkennt, dass es sich um ein AMD-Modul handelt. Ich bin mir nur nicht sicher, warum es sich nicht dem jQuery-Namespace hinzufügt.

Ich habe auch überprüft, ob die Seite korrekt geladen wurde, aber das domReady-Modul kümmert sich darum.

Ich benutze auch Coffeescript, aber ich denke nicht, dass das ein Problem sein sollte.

Answer 1

Um Sammy zum Laufen zu bringen, lasse ich einfach die $. -Notation fallen, da ich sie einspritze

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

Leider scheint $.sammy nicht zu funktionieren. Die RequireJs-Dokumentation hat vielleicht einige Hinweise dazu, wie man $.sammy zum Laufen bringt

var require = {
    deps: ["some/module1", "my/module2", "a.js", "b.js"],
    callback: function(module1, module2) {
        // Diese Funktion wird aufgerufen, wenn alle oben in deps aufgeführten Abhängigkeiten geladen sind. Beachten Sie, dass diese Funktion aufgerufen werden könnte, bevor die Seite geladen ist. Dieser Rückruf ist optional.
    }
};

Es sieht so aus, als ob ich den Rückruf verwenden könnte, um dies mit etwas wie folgt zu erreichen

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

Aber ich kann dies nicht mit dem require.config zum Laufen bringen, wenn jemand weiß, wie man das löst, lass es mich wissen! Ich habe andere Leute gesehen, die so etwas mit knockoute und ko und dem Mapping-Plugin ko.mapping machen

Answer 2

Sammy sollte schön mit requirejs spielen und bereits wissen, dass das jquery-Modul geladen werden muss.

Ich bin neu zu sammyjs, also waren die Antworten oben vielleicht vor sammy amd-kompatibel?

Dies ist ein Schnipsel der aktuellen sammyjs-Version, die zeigt, dass es mit requirejs in Ordnung sein sollte... zumindest hatte ich damit keine Probleme.

(function(factory){
  // Unterstützung von Modullade-Szenarien
  if (typeof define === 'function' && define.amd){
    // AMD Anonymer Modul
    define(['jquery'], factory);
  } else {
    // Kein Modullader (einfaches  -Tag) - direkt ins globale Namespace einfügen
    jQuery.sammy = window.Sammy = factory(jQuery);
  }
})(function($){
</code></pre>

<p>Hier ist ein Beispiel zur Verwendung davon</p>

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

 Sammy('#main', function() {

        // definiere eine 'get'-Route, die bei '#/path' ausgelöst wird
        this.get('#/path', function() {
          // dieser Kontext ist ein Sammy.EventContext
          this.$element() // $('#main')
              .html('Eine neue Route!');
        });
      }).run();

}
</code></pre></x-turndown>