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