浅析Handlebars.js的使用流程 - 水泊梁山 - CSDN博客
浅析Handlebars.js的使用流程
handlebars
Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切。
第一步：导入相关的JS文件
Handlebars 是一个Jquery插件，在引入Handlebars .js之前需要引进jquery.js。
type="text/javascript" src="js/jquery.js"&&
type="text/javascript" src="js/handlebars-1.0.0.beta.6.js"&&
第二步：编写Handlebars 模板
Handlebars的表达式 是以“{{”开始，以“}}”结尾。如果上下文中包含HTML代码，则需要把双大括号换成三个大括号即可：{{{，可以通过&script&标签把模板加载到浏览器中，并设置 &script& 标签的type属性为浏览器不能够辨别的（此处可自由发挥）。
id="list-template" type="text/x-handlebars-template"&
{{#each data}}
&姓名:{{name}}&/td&
&td&年龄:{{age}}&/td&
&td&性别:{{sex}}&/td&
第三步：预编译Handlebars 的模板
在 JavaScript 中可以使用 pile()方法来编译模板。
var source
= $("#list-template").html();
var template = pile();
第四步：传递上下文，执行模板
var data=[
{name:"张三",age:"18"，sex："男"},
{name:"李四",age:"22"，sex："女"},
{name:"王五",age:"24"，sex："男"}
var html = template({data:data});
执行之后，这个模板就会渲染出：
&姓名:张三&
&姓名:李四&
&姓名:王五&
本篇文章只是叙述了使用Handlebars最基础的流程，后续将讲解Handlebars.js的具体用法。
我的热门文章09:51 提问
handlebars
JS模板引擎的语句问题？
&script type="text/x-handlebars-template" id="tpl-vote-button"&
{{#compare joined 0}}
&a href="javascript:;" id="btn-vote-submit" class="am-btn am-btn-success am-btn-block"&
&i class="am-icon am-icon-user-plus"&&/i&
&span class="am-navbar-label"&投票&/span&
&a href="javascript:;" id="btn-vote-submit" class="am-btn am-btn-success am-btn-block am-disabled"&
&i class="am-icon am-icon-user-plus"&&/i&
&span class="am-navbar-label"&已参与&/span&
{{/compare}}
var buttonTpl = pile($('#tpl-vote-button').html());
Handlebars.registerHelper("compare",function(v1,v2,options){
if(v1=v2){
return options.fn(this);
return options.inverse(this);
$("#button-choice").append(buttonTpl(data.data));
在模板语句这里不知道错在哪了报错
按赞数排序
----------------------biu~biu~biu~~~在下问答机器人小D，这是我依靠自己的聪明才智给出的答案，如果不正确，你来咬我啊！
其他相关推荐番外篇之——使用 Handlebars
前面我们在 Express 中使用的 EJS 模板引擎进行渲染视图和页面的展示。当模版文件代码比较多且逻辑复杂时，代码就变得非常难看了，满眼的 &% 和 %&。下面我们尝试使用 Handlebars 这个模版引擎替换 EJS ，代码会变得整洁许多。
Handlebars 是 JavaScript 一个语义模板库，通过对 view 和 data 的分离来快速构建 Web 模板。它采用 &Logic-less template&（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译，这样可以保证模板加载和运行的速度。Handlebars 兼容 Mustache，你可以在 Handlebars 中导入 Mustache 模板。
Handlebars 的语法也非常简单易学。这里我们不会讲解 Handlebars 的语法，官网（
）的文档非常全面。
我们使用 express-handlebars 这个第三方包添加对 Handlebars 的支持。
注意：也许你会非常自觉的认为应该使用 npm install handlebars 安装 Handlebars 然后开始大刀阔斧地修改代码。但在这里我们不使用官方提供的 Handlebars 包，Express 默认支持的模板引擎中不包含 Handlebars ，虽然我们可以通过 consolidate.js + handlebars 实现，但仍然有一个缺点是不支持从一个模版文件加载另一个模版文件，而在 EJS 中可以使用 &%- include someTemplate %& 轻松实现。express-handlebars 包弥补了该缺点，所以我们使用 express-handlebars 来完成代码的修改。
首先，打开 package.json ，删除 ejs 并添加对 express-handlebars 的依赖：
"express-handlebars": "*"
并 npm install 安装 express-handlebars 包。
打开 app.js ，添加一行：
var exphbs
= require('express-handlebars');
app.set('view engine', 'ejs');
app.engine('hbs', exphbs({
layoutsDir: 'views',
defaultLayout: 'layout',
extname: '.hbs'
app.set('view engine', 'hbs');
这里我们注册模板引擎处理后缀名为 hbs 的文件，然后通过 app.set('view engine', 'hbs'); 设置模板引擎。以上参数的意思是：
layoutsDir: 'views'： 设置布局模版文件的目录为 views 文件夹
defaultLayout: 'layout'： 设置默认的页面布局模版为 layout.hbs 文件，跟 Express 2.x 中的 layout.ejs 作用类似。
extname: '.hbs'： 模版文件使用的后缀名，这个 .hbs 是我们自定的，我们当然可以使用 .html 和 .handlebars 等作为后缀，只需把以上的 hbs 全部替换即可。
我们以修改主页为例，学习如何使用 Handlebars 。为了测试修改后能否正常显示文章及其相关信息，在开始之前，我们先注册几个用户并发表几篇文章，然后进行一些互相转载、访问和留言等工作，而不是清空数据库。
然后打开 views 文件夹，删除 header.ejs 和 footer.ejs ，新建 layout.hbs ，添加如下代码：
&!DOCTYPE html&
&meta charset="UTF-8" /&
&title&Blog&/title&
&link rel="stylesheet" href="/stylesheets/style.css"&
&h1&{{title}}&/h1&
&span&&a title="主页" href="/"&home&/a&&/span&
&span&&a title="存档" href="/archive"&archive&/a&&/span&
&span&&a title="标签" href="/tags"&tags&/a&&/span&
&span&&a title="友情链接" href="/links"&links&/a&&/span&
{{#if user}}
&span&&a title="上传" href="/upload"&upload&/a&&/span&
&span&&a title="发表" href="/post"&post&/a&&/span&
&span&&a title="登出" href="/logout"&logout&/a&&/span&
&span&&a title="登录" href="/login"&login&/a&&/span&
&span&&a title="注册" href="/reg"&register&/a&&/span&
&span&&form action="/search" method="GET"&&input type="text" name="keyword" placeholder="SEARCH" class="search" /&&/form&&/span&
{{#if success}}
&div&{{success}}&/div&
{{#if error}}
&div&{{error}}&/div&
{{{body}}}
&/article&
这里我们定义了一个默认的页面布局模版（layout.hbs）。其余所有的模版都将 &继承& 该模版，即替换掉 {{{body}}} 部分。
删除 index.ejs ，新建 index.hbs ，添加如下代码：
{{#each posts}}
&p&&h2&&a href="/u/{{name}}/{{time.day}}/{{title}}"&{{title}}&/a&&/h2&
&a href="/u/{{name}}"&&img src="{{head}}" class="r_head" /&&/a&&/p&
&p class="info"&
作者：&a href="/u/{{name}}"&{{name}}&/a& |
日期：{{time.minute}} |
{{#each tags}}
{{#if this}}
&a class="tag" href="/tags/{{this}}"&{{this}}&/a&
{{#if reprint_info.reprint_from}}
&br&&a href="/u/{{reprint_info.reprint_from.name}}/{{reprint_info.reprint_from.day}}/{{reprint_info.reprint_from.title}}"&原文链接&/a&
&p&{{{post}}}&/p&
&p class="info"&
阅读：{{pv}} |
评论：{{comments.length}} |
{{#if reprint_info.reprint_to}}
{{reprint_info.reprint_to.length}}
这样就可以了，现在运行你的博客试试吧。
当我们渲染 index.hbs （res.render('index', { ... });）时，index.hbs 会替换 layout.hbs 中的 {{{body}}} 部分，然后渲染视图。需要注意的是，我们在 {{#each}} ... {{/each}} 中使用了 this ，这里的 this 指向当前上下文，即代表遍历的每一项。
注意：Handlebars 中的 {{{htmlContext}}}，相当于 EJS 中的 &%- htmlContext %& ，{{textContext}} 相当于 &%= textContext %& 。
在 ejs 中，我们可以随意使用 JavaScript 表达式，如 &% if (1 + 1 === 2) { %& ... &% } %& ，但在 Handlebars 中我们却不能这样写 {{#if (1 + 1 === 2)}} ... {{/if}} ，那么该如何修改 archive.ejs 呢？archive.ejs 代码如下：
&%- include header %&
&ul class="archive"&
&% var lastYear = 0 %&
&% posts.forEach(function (post, index) { %&
&% if (lastYear != post.time.year) { %&
&li&&h3&&%= post.time.year %&&/h3&&/li&
&% lastYear = post.time.year } %&
&li&&time&&%= post.time.day %&&/time&&/li&
&li&&a href="/u/&%= post.name %&/&%= post.time.day %&/&%= post.title %&"&&%= post.title %&&/a&&/li&
&%- include footer %&
我们通过定义了一个 lastYear 变量实现了判断并只显示一次年份的功能。在 Handlebars 中，我们可以通过 registerHelper 实现以上功能，关于 registerHelper 的使用详见 。在 express-handlebars 中使用 registerHelper 也很简单，具体如下。
打开 index.js ，将 app.get('/archive') 修改如下：
app.get('/archive', function (req, res) {
Post.getArchive(function (err, posts) {
if (err) {
req.flash('error', err);
return res.redirect('/');
res.render('archive', {
title: '存档',
posts: posts,
user: req.session.user,
success: req.flash('success').toString(),
error: req.flash('error').toString(),
helpers: {
showYear: function(index, options) {
if ((index == 0) || (posts[index].time.year != posts[index - 1].time.year)) {
return options.fn(this);
删除 archive.ejs ，新建 archive.hbs ，添加如下代码：
&ul class="archive"&
{{#each posts}}
{{#showYear @index}}
&li&&h3&{{this.time.year}}&/h3&&/li&
{{/showYear}}
&li&&time&{{this.time.day}}&/time&&/li&
&li&&a href="/u/{{this.post.name}}/{{this.time.day}}/{{this.title}}"&{{this.title}}&/a&&/li&
假如你了解如何使用 Handlebars 中的 registerHelper ，那么上面的代码就很容易理解了。其中，{{#each}} ... {{/each}} 内的 @index 表示当前遍历的索引。
最后，还需提醒的一点是：我们每次渲染一个视图文件时，都会结合 layout.hbs 然后渲染，有时候我们并不需要 layout.hbs ，比如 404 页面，需设置为：
res.render('404', {
layout: false
通过设置 layout: false 就取消了自动加载 layout.hbs 页面布局模版。
至此，我们通过采用 layout 的方式实现了视图文件的加载及渲染，express-handlebars 还提供了另一种类似于 EJS 中 include 的加载方式——使用 partial ，前面的修改中我们并没有添加分页模版（paging.hbs），要想引入分页模版使用 {{& paging}} 即可。详细使用见 。
读者可自行完成剩余的修改工作。}