第7章 Handlebars模板引擎

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 小结