RequireJS 和多个编译的 Handlebar.js 模板在一个文件中

RequireJS and multiple compiled Handlebar.js templates in a single file

我是 RequireJS 的新手。我在 Java/Maven 应用程序中同时使用 RequireJSHandlebars.js

我也在使用 jknack's handlebars-maven-plugin 来编译我的 Handlebars 模板。需要编译模板,以便它们作为跨域解决方案的一部分工作。

插件正在编译我的模板并将它们合并到一个文件中。生成的文件(我们称之为 template.js)包含如下内容:

define('a.template', ['handlebars'], function(Handlebars) {
  ...
  var templates = Handlebars.templates = Handlebars.templates || {};
  templates['a.template'] = template;
  var partials = Handlebars.partials = Handlebars.partials || {};
  partials['a.template'] = template;
  return template;
}
define('b.template', ['handlebars'], function(Handlebars) {
  ...
  var templates = Handlebars.templates = Handlebars.templates || {};
  templates['b.template'] = template;
  var partials = Handlebars.partials = Handlebars.partials || {};
  partials['b.template'] = template;
  return template;
}

经过一些阅读后,我相信这些是命名模板(我知道这不是最佳实践)但是插件是这样生成它们的,我宁愿不手动编辑生成的文件以删除名称以防万一将来模板会更改,我团队中的其他人必须重新生成它们。

现在我想从单个文件加载我编译的 Handlebar 模板并将它们与 RequireJS 一起使用。经过一番折腾后,我终于找到了一些看起来有用的东西:

require.config({
  paths: {
    'handlebars': '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min',
    'template': 'template'
  },
  shim: {
    'handlebars': {
      exports: 'handlebars'
    },
    'template': {
      exports: ['a.template','b.template']
    },
    'a.template': ['template'],
    'b.template': ['template'],
  }
});
define(['a.template', 'b.template'],
    function (aTemplate, bTemplate) {
... 

但是,我在加载页面时看到错误:

Uncaught TypeError: undefined is not a function

我已经将其追踪到 RequireJS 中的“getGlobal”函数(我认为这是尝试 split)。因此,'template' 的导出属性是一个数组而不是字符串似乎是一个问题。

模板似乎按我预期的那样工作。


我不确定我的做法是否有误,是否有更好的方法从单个文件加载多个已编译的模板?

我是否发现了 RequireJS 或 jknack 的 maven 插件中的错误?

我在没有 JavaScript 错误的情况下完成了以下工作。

require.config({
  paths: {
    'handlebars': '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min',
    'a.template': 'template',
    'b.template': 'template'
  },
  shim: {
    'handlebars': {
      exports: 'handlebars'
    }
  }
});
define(['a.template', 'b.template'],
    function (aTemplate, bTemplate) {
...