2

我目前正在尝试学习 BackboneJS 和随之而来的东西，但我无法真正让它发挥作用。我的问题是，一旦我尝试使用 Backbone 对象，我就会遇到麻烦。所以我试图记录他们两个，给予。

undefined main.js:23
undefined main.js:24

代码如下。

// RequireJS configuration.
require.config({
  paths: {
    // Major dependecies.
    jquery: 'libs/jquery/jquery-1.8.3.min',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',

    // Template dir.
    templates: '../templates'
  },

  // Append query string, to avoid browser caching, while in dev.
  urlArgs: "bust=" +  (new Date()).getTime()
});

// Start application.
require([
  'underscore',
  'backbone'
//  'router'
], function(_, backbone) {
  console.log(backbone);
  console.log(_);
//  Router.initialize();
});

如您所见，我尝试在路由器中使用 Backbone 对象，但没有成功。然后我尝试了我的 main.js，同样的事情。

4

3 回答 3

6

您需要使用 require shim，因为 Backbone 和 Underscore 不支持 AMD 开箱即用。

require shim 允许您加载非 AMD 模块（请参阅此处）。请注意，exports对象是将用作模块的对象的名称。

paths: {
      // Major dependecies.
      jquery: 'libs/jquery/jquery-1.8.3.min',
      underscore: 'libs/underscore/underscore-min',
      backbone: 'libs/backbone/backbone-min',

      // Template dir.
      templates: '../templates'
},
shim: {
    backbone: {
        deps: ["underscore", "jquery"],
        exports: "Backbone"
    },

    underscore: {
        exports: "_"
    }
}

另一种方法是将脚本直接包含在您的 HTML 中。

<script src="libs/jquery/jquery.js"></script>
<script src="libs/underscore/underscore.js"></script>
<script src="libs/backbone/backbone.js"></script>
于 2012-12-18T19:51:31.737 回答
2

就我个人而言，我发现将 Backbone（以及下划线和 jQuery）从 Require 中移除要容易得多。您可以以正常方式（通过脚本标签）加载它们，然后在此之后执行所有 Require 加载，一切都会完美运行。您将拥有一些全局变量（$、_ 和 Backbone），但除此之外，我现在发现这种方法的缺点。

或者，您可以浪费大量时间玩 shims 之类的东西来正确地将 Backbone 带入 Require-land ...但是如果您不必这样做，为什么还要浪费时间呢？另外，如果你这样做，你必须在你拥有的每个文件的定义调用中包含 jQuery/Backbone/Underscore，这有点浪费时间/精力。

于 2012-12-18T19:51:27.557 回答
0

我怀疑这是您通过 require.js 引用文件的方式的错误（或者骨干不能很好地与 require 配合使用）。检查浏览器的开发人员工具并确保您确实在下载文件。“控制台”或“网络”选项卡应指示您是否成功获取文件（HTTP 代码 200），或者它没有找到它们（HTTP 代码 404），或者它甚至没有尝试（“网络”中没有行完全）。

此外，尝试将 require.js 完全排除在循环之外，并使用标准<script>标签将文件直接加载到页面上。这样您就知道您的文件和变量按预期工作。

于 2012-12-18T19:53:07.727 回答