RequireJS 和多个编译的 Handlebar.js 模板在一个文件中
RequireJS and multiple compiled Handlebar.js templates in a single file
我是 RequireJS 的新手。我在 Java/Maven 应用程序中同时使用 RequireJS 和 Handlebars.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) {
...
我是 RequireJS 的新手。我在 Java/Maven 应用程序中同时使用 RequireJS 和 Handlebars.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) {
...