7.2 选择模板引擎
7.3 Jade:不走寻常路
7.4 Handlebars基础
7.4.1 注释
{{!super-secret comment}}
<!-- not-so-secret comment -->
7.4.2 块级表达式
块级表达式提供了流程控制、条件执行和可扩展性。
{
currency: {
name: 'United States dollars',
abbrev: 'USD',
},
tours: [
{ name: 'Hood River', price: '$99.95' },
{ name: 'Oregon Coast', price, '$159.95' },
],
specialsUrl: '/january-specials',
currencies: [ 'USD', 'GBP', 'BTC' ],
}
<ul>
{{#each tours}}
{{! I'm in a new block...and the context has changed }}
<li>
{{name}} - {{price}}
{{#if ../currencies}}
({{../../currency.abbrev}})
{{/if}}
</li>
{{/each}}
</ul>
{{#unless currencies}}
<p>All prices in {{currency.name}}.</p>
{{/unless}}
{{#if specialsUrl}}
{{! I'm in a new block...but the context hasn't changed (sortof) }}
<p>Check out our <a href="{{specialsUrl}}">specials!</p>
{{else}}
<p>Please check back often for specials.</p>
{{/if}}
<p>
{{#each currencies}}
<a href="#" class="currency">{{.}}</a>
{{else}}
Unfortunately, we currently only accept {{currency.name}}.
{{/each}}
</p>
7.4.3 服务器端模板
让 Express 提供 Handlebars 支持:
npm install --save express3-handlebars
在Express中引入:
var handlebars = require('express3-handlebars')
.create({ defaultLayout: 'main' });
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
7.4.4 视图和布局
视图通常表现为网站上的各个页面。
布局是一种特殊的视图,事实上,它是一个用于模板的模板。
先渲染视图,再渲染布局。
7.4.5 在Express中使用(或不使用)布局
创建视图引擎时,指定一个默认的布局:
var handlebars = require('express3-handlebars')
.create({ defaultLayout: 'main' });
默认情况下,在views子目录下查找视图,在views/layouts下查找布局。
指定不同模板:
app.get('/foo', function(req, res){
res.render('foo', { layout: 'microsite' });
});
7.4.6 局部文件
组件。
7.4.7 段落
7.4.8 完善你的模板
1 HTML5 Boilerplate
2 模板网站
Themeforest
WrapBootstrap
7.4.9 客户端Handlebars
在前端拿到模板,用ajax填充数据,生成html,赋值给div。
7.5 小结