如何在使用 AMD 时在 Backbone.js 中加载引导模型 (require.js)

Backbone.js 文档建议以这种方式加载引导模型：

<script>
var Accounts = new Backbone.Collection;
Accounts.reset(<%= @accounts.to_json %>);
var Projects = new Backbone.Collection;
Projects.reset(<%= @projects.to_json(:collaborators => true) %>);
</script>

但这是一个不能使用的模式AMD 方法（使用 require.js）

唯一可能的解决方案是声明存储 JSON 数据的全局变量并稍后在相关初始化方法中使用该变量。

有没有更好的方法这样做（没有全局变量）？

这就是我们如何以不污染全局命名空间的方式引导数据。相反，它专门使用 require.js。它还可以帮助您根据模板中的变量提供初始应用程序配置。

在您渲染的页面中

<script src="require.js"></script>
<script>
define('config', function() {
  return {
    bootstrappedAccounts: <%= @accounts.to_json %>,
    bootstrappedProjects: <%= @projects.to_json(:collaborators => true) %>
  };
});
</script>
<script src="app.js"></script>

globals.js

该文件检查配置并使用返回的任何数据扩展自身

define([
  'config',
  'underscore'
], function(config) {

  var globals = {
  };
  _.extend(globals, config);
  return globals;

});

config.js

如果您希望能够加载应用程序，无论您是否已定义，则需要此文件config在页面中。

define(function() {
  // empty array for cases where `config` is not defined in-page
  return {};
});

app.js

require([
  'globals',
  'underscore',
  'backbone'
], function(globals) {

  if (globals.bootstrappedAccounts) {
    var accounts = new Backbone.Collection(globals.bootstrappedAccounts);
  }
  if (globals.bootstrappedProjects) {
    var projects = new Backbone.Collection(globals.bootstrappedProjects);
  }

});