Handlebars 预编译模板返回未定义值

Question

我有一个模板文件 test_temp.handlebars。它的内容是，

<div>Hello {{name}}</div>

我在命令行中使用命令编译了模板，

handlebars test_temp.handlebars -f test_temp.js

test_temp.js 文件的内容是，

(function() {
var template = Handlebars.template, templates = Handlebars.templates =Handlebars.templates || {};
templates['test_temp'] = template({"compiler":[5,">=2.0.0"],"main":function(depth0,helpers,partials,data) {
var helper, functionType="function", escapeExpression=this.escapeExpression;
return "<div>Hello "
+ escapeExpression(((helper = helpers.name || (depth0 && depth0.name)),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper)))
+ "</div>\n";
},"useData":true});
})();

现在我在我的 html 中阅读我的预编译模板。

var compiledTemplate = Handlebars.templates['test_temp'];
var temp_html = compiledTemplate({ name: 'World' });
console.log(temp_html);  //undefined

这里返回给 temp_html 的值是未定义的。 请让我知道如何将此 temp_html 放入 div 中。

$("#tempdiv").html(temp_html);

当我更新 div 内的 temp_html 时，抛出的错误是，

"Uncaught TypeError: undefined is not a function"

如何获取预编译的模板值并将其插入到 div 中。

Answer 1

看到这个答案： https://stackoverflow.com/a/22214119/432089

如果您从 npm 下载车把，您将获得 2.0 alpha 版本，而不是稳定的 1.3.0 版本。换句话说，很可能您有 2.0 alpha 预编译模板，但您使用的是 1.3.0 运行时 JS。

Answer 2

检查这个小提琴：

http://jsfiddle.net/8TMw4/

<script id="some-template" type="text/x-handlebars-template">
    <div>Hello {{name}}</div>    
</script>

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 
console.log(template); 

Answer 3

我已经使用以下过滤器完成了这项任务：

• 在后端预编译模板（使用您喜欢的构建工具）。
• 将预编译的模板加载到 Ember.TEMPLATES['"+templateName+"']。
• 您必须遵循 ember 命名约定，以便 Ember 识别您的路径、视图或组件模板所在的位置。这是Ember.DefaultResolver 和ComponentLookup 的工作。如果您实现自定义解析器并将其分配给应用程序实例，则可以定义特定的命名约定。

您可以查看demo example，其构建工具是 rake-pipeline 或 broccoli。