将 SammyJs 与 RequireJs 一起使用答案

【问题标题】：Using SammyJs with RequireJs将 SammyJs 与 RequireJs 一起使用
【发布时间】：2013-06-27 16:11:01
【问题描述】：

让 sammyjs 与 requirejs 一起玩有点麻烦。调用 $.sammy 失败，错误提示 sammy 未在 jQuery 命名空间中定义。

这是我的需求配置

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"

这是我的页面 javascript

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

这是我的视图模型

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

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

但是，当我尝试调用 $.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'

我猜这是require.config 的问题，但老实说我不确定。

sammy-0.7.4.js 文件下载正常。

视图模型中传递给define的sammy不为空

我在 sammy 文件上设置了一个断点，它被击中并识别出它是一个 AMD 模块。我只是不确定它为什么不将自己添加到 jQuery 命名空间中。

我首先检查了页面是否正确加载，但 domReady 模块会处理该问题。

我也在使用咖啡脚本，但我认为这不是问题。

【问题讨论】：

标签： javascript coffeescript requirejs amd sammy.js

【解决方案1】：

为了让 sammy 工作，我只是删除了 $. 符号，因为我正在注入它

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

不幸的是，我似乎无法让$.sammy 工作。 The RequireJs documentation 有一些关于如何让 $.sammy 工作的提示

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.
    }
};

看起来我可以使用回调来让它与这样的东西一起工作

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

但是我不能用require.config 来玩这个，如果有人知道如何排序，请告诉我！我见过其他人用knockout 和ko 以及映射插件ko.mapping 做这样的事情

【讨论】：

【解决方案2】：

Sammy 应该可以很好地使用 requirejs，并且已经知道它需要加载 jquery 模块。

我是 sammyjs 的新手，所以也许上面的答案是在 sammy 兼容 amd 之前？

这是current sammyjs version的sn-p，说明用requirejs应该没问题……至少我没遇到什么问题。

(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($){

这是一个使用它的例子

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();

}

【讨论】：