我发现handlebar.runtime.js
没有compile
方法。所以我下载了不正确的版本来使用模板引擎。
但是 handlebar.runtime.js
是做什么用的?
如果Download: runtime-1.0.0
在下载页面上更隐蔽一些就更好了?
最佳答案
Handlebars 使用看起来像 {{this}} 的标签,浏览器本身无法理解。为了让浏览器呈现这些标签,它们必须被编译。编译可以在您加载页面之前或之后进行。
为了加快速度,您可以预编译您的模板。更多信息请访问 handlebars site .如果这样做,您只需要在页面上包含 handlebars 运行时脚本。它比完整的 handlebars 脚本小,因为它不需要担心编译模板。它假设您已经预编译了它们。
当一个模板被编译时,它被转换成一个函数,当被调用时,将返回真正的 HTML,其中花括号标签已经被转换成浏览器可以理解的值。
例如,这个...
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
...将在预编译后转换为以下内容(截至 2014 年 6 月):
(function() {
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['test.hbs'] = template({"compiler":[5,">= 2.0.0"],"main":function(depth0,helpers,partials,data) {
var helper, functionType="function", escapeExpression=this.escapeExpression;
return "<div class=\"entry\">\n <h1>"
+ escapeExpression(((helper = helpers.title || (depth0 && depth0.title)),(typeof helper === functionType ? helper.call(depth0, {"name":"title","hash":{},"data":data}) : helper)))
+ "</h1>\n <div class=\"body\">\n "
+ escapeExpression(((helper = helpers.body || (depth0 && depth0.body)),(typeof helper === functionType ? helper.call(depth0, {"name":"body","hash":{},"data":data}) : helper)))
+ "\n </div>\n</div>\n";
},"useData":true});
})();
这里要注意的是,在某些时候,handlebars 模板必须转换为该函数,以便生成真正的 HTML。 handlebars 运行时脚本不包含编译器,因此使其更小。通过预编译您的模板,JavaScript 在呈现页面之前必须执行的繁重步骤将减少。
关于javascript - handlebar.js 和 handlebar.runtime.js 有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19147161/