backbone.localStorage，require.js，“未捕获的类型错误:未定义不是函数"； [英] backbone.localStorage, require.js, "Uncaught TypeError: undefined is not a function"

问题描述

我正在关注 Uzi Kilon 的 BackboneJS/RequireJS/backbone.LocalStorage 示例，位于 http://kilon.org/blog/2012/08/build-backbone-apps-using-requirejs/.

I'm following Uzi Kilon's BackboneJS / RequireJS / backbone.LocalStorage example at http://kilon.org/blog/2012/08/build-backbone-apps-using-requirejs/.

当我 git clone https://github.com/uzikilon/Todos 时，它工作得很好 - 但它使用了旧版本的主干.localstorage.如果我将 lib/backbone.localStorage 替换为新版本 http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.0/backbone.localStorage-分钟，但是，然后我在这里得到未捕获的类型错误:未定义不是函数":https://github.com/uzikilon/Todos/blob/master/js/models/Todo.js#L3 - 为什么?我认为这与 http://requirejs.org/docs 上的棘手细节有关/api.html#config-shim 或者这个:http://blog.mostlystatic.com/2013/01/backbone-localstorage-uncaught.html.

When I git clone https://github.com/uzikilon/Todos it works just fine - but it uses older versions of backbone.localstorage. If I replace lib/backbone.localStorage with the newer version http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.0/backbone.localStorage-min, though, then I get "Uncaught TypeError: undefined is not a function" here: https://github.com/uzikilon/Todos/blob/master/js/models/Todo.js#L3 - why? I think this has something to do with the tricky details at http://requirejs.org/docs/api.html#config-shim or perhaps this: http://blog.mostlystatic.com/2013/01/backbone-localstorage-uncaught.html.

require.config({
  baseUrl: "./js/",
  paths: {
    jquery: 'lib/jquery-1.8.2',
    underscore: 'lib/underscore-1.4.2',
    backbone: 'lib/backbone-0.9.2',
//    'backbone.localStorage': 'lib/backbone.localStorage'
    'backbone.localStorage': 'http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.0/backbone.localStorage-min'

  },
  shim: {
    underscore: {
      exports: "_"
    },
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    'backbone.localStorage': {
      deps: ['backbone'],
      exports: 'Backbone'
    }
  }
});

推荐答案

问题在于最新的 Backbone localStorage 是 AMD 兼容的，因为该示例中的版本不是，因此是 shim 配置.

The problem lies with the fact that the latest Backbone localStorage is AMD compatible, where as the version in that example is not, hence the shim config.

修复

删除backbone.localStorage的shim配置，你将不需要它:

Remove the shim config for backbone.localStorage, you won't be needing it:

'backbone.localStorage': {
  deps: ['backbone'],
  exports: 'Backbone'
}

然后，在 Todo.js 中更改定义调用:

Then, in Todo.js change the define call from:

define(['underscore', 'backbone.localStorage'], function(_, Backbone) {

到:

define(['underscore', 'backbone', 'backbone.localStorage'], function(_, Backbone) {

为什么?

shim exports 配置被用来说'当我要求backbone.localStorage 时，返回我Backbone'.

The shim exports config was being used to say 'When I ask for backbone.localStorage, return me Backbone'.

这允许 'backbone.localStorage' 被简单地用作 Todo 模块内的 Backbone.

This allowed 'backbone.localStorage' to be used simply as Backbone inside the Todo module.

但现在 backbone.localStorage 支持 AMD 并从 define 调用显式返回一个值.所以Todo.js中Backbone的值不再是Backbone库，而实际上是Backbone.LocalStorage

But now backbone.localStorage supports AMD and explicitly returns a value from the define call. So the value of Backbone in Todo.js is no longer the Backbone library, but is actually a constructor for Backbone.LocalStorage

据我所知，对于 AMD 模块，shim 配置被忽略，或者至少不应该被使用:

As far as I understand, the shim config is ignored for AMD modules, or at least should not be used:

仅使用其他垫片"模块作为垫片脚本的依赖项，或没有依赖关系并在它们之后调用define()的AMD库还创建一个全局(如 jQuery 或 lodash).否则，如果您使用AMD 模块作为 shim 配置模块的依赖项，在构建后，AMD 模块可能不会被评估，直到在构建执行，并且会发生错误.最终的解决办法是升级所有填充代码以具有可选的 AMD define() 调用.

Only use other "shim" modules as dependencies for shimmed scripts, or AMD libraries that have no dependencies and call define() after they also create a global (like jQuery or lodash). Otherwise, if you use an AMD module as a dependency for a shim config module, after a build, that AMD module may not be evaluated until after the shimmed code in the build executes, and an error will occur. The ultimate fix is to upgrade all the shimmed code to have optional AMD define() calls.

为了解决问题，需要在 Todo.js 中添加额外的依赖项，以便回调参数匹配.

To fix things up the additional dependency needs to be added in Todo.js so that so that the callback parameters match up.

希望这是有道理的.

这篇关于backbone.localStorage，require.js，“未捕获的类型错误:未定义不是函数"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！