Handlebars模板引擎介绍和开发指南.docxVIP

Handlebars 模板引擎介绍和开发指南 本文翻译和整理自 Handlebars Github 和官网，当前 handlebar 版本 1.3.0 。 介绍 Handlebars 是一个 Javascript 模板引擎， 能让你轻松高效的 编写语义化模板，它是 Mustache 模板引擎的一个扩展， Handlebars 和 Mustache 都是弱逻辑的模板引擎， 能将 Web 前端的视图和代码分离，降低两者之间耦合。 Handlebars 的特点是一切都是表达式，没有 data api ，不污 染 HTML 标签，和 DeDecms 、 wordpress 模板类似，因此 能很方便的与其他前端 JS 库混用，并且编写简单，易于扩 展。 Handlebars 支持的浏览器及运行环境有： IE6+ 、 Chrome 、 Firefox 、Safari5+ 、 Opera11+ 以及 Node.js 。 Handlebars 是 ember.js 的默认模板引擎，同时也是 nodejs web 框架 Clouda 、 Meteor 的默认模板引擎。 安装 Handlebars 的安装很简单，你可以从 Github 和官网 下载 最新版本， 也可以从 bower 包管理器中将它添加到你的页面 上。 用法 简单来说， Handlebars 里的语法是 Mustache 的超集， 如果 你想了解基础的语法，可以查看 Mustache 的帮助页面，下 面也将讲解 Handlebars 中的语法。 基础语法 Handlebars 模板看起来和一般的 HTML 没什么两样，只不 过是在 HTML 中嵌入了 Handlebars 的表达式。如下： lt;div class=entrygt; lt;h1gt;{{title}}lt;/h1gt; lt;div class=bodygt; {{body}} lt;/divgt; lt;/divgt; 一个 Handlebars 的表达式是被 {{和 }}包含起来的内容。了解 更多 Handlebars 表达式。 你可以将模板的内容或数据放到一个 lt;scriptgt; 标签里， 也可以直接写在 javascript 里： lt;script id=entry-template type=text/x-handlebars-templategt; template content lt;/scriptgt; 当你写了一个模板以后， 使用 Hpile 方法将模 板编译为函数，生成的执行函数接受 context 作为参数，用 来渲染模板。了解更多执行函数。 比如下面： var source = lt;pgt;Hello, my name is {{name}}. I am from {{hometown}}. I have + {{kids.length}} kids:lt;/pgt; + lt;ulgt;{{#kids}}lt;ligt;{{name}} is {{age}}lt;/ligt;{{/kids}}lt;/ulgt;; var template = Hpile(source); var data = { name: Alan, hometown: Somewhere, TX, kids: [{name: Jimmy, age: 12}, {name: Sally, age: 4}]}; var result = template(data); // 将被渲染为 : // lt;pgt;Hello, my name is Alan. I am from Somewhere, TX. I have 2 kids:lt;/pgt; // lt;ulgt; // lt;ligt;Jimmy is 12lt;/ligt; // lt;ligt;Sally is 4lt;/ligt; // lt;/ulgt; 你还可以预编译你的模板，它将会生成一个小一些的运行库， 这对移动设备上的 web 页面非常重要。了解更多预编译。 HTML 转义 为安全起见， Handlebars 表达式中的一些 HTML 字符将被 转义，如果你不想让 Handlebars 转义字符，使用三个花括 号{{{： //template: lt;div class=entrygt; lt;h1gt;{{title}}lt;/h1gt; lt;div class=bodygt; {{{body}}} lt;/divgt; lt;/divgt; //context: { title: All about lt;pgt; Tags, body: lt;pgt;This is a post about amp;lt;pamp;gt;