视图和布局###
视图通常表现为网站上的各个页面（它也可以表现为页面中AJAX局部加载的内容，或一封电子邮件，或页面上的任何东西）。默认情况下，Express会在views子目录中查找视图。布局是一种特殊的视图，事实上，它是一个用于模板的模板。布局是必不可少的，因为站点的大部分页面都有几乎相同的布局。例如，页面中必须有一个<html>元素和一个<title>元素，它们通常都会加载相同的CSS文件，诸如此类。你不想为每个网页复制代码，于是这就需要用到布局。让我们看看基本的布局文件：
<!doctype>
<html>
<head>
<title>Meadowlark Travel</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
{{{body}}}
</body>
</html>
请注意标记内的文本：{{{body}}}。这样视图引擎就知道在哪里渲染的内容了。一定要用三重大括号而不是两个，因为视图很可能包含HTML，我们并不想让Handlebars试图去转义它。注意，在哪里放置{{{body}}}并没有限制。此外，常见的网页元素，如页眉和页脚，通常也在布局中，而不在视图中。举例如下：
<!-- ... -->
<body>
<div class="container">
<header><h1>Meadowlark Travel</h1></header>
{{{body}}}
<footer>©{{copyrightYear}} Meadowlark Travel</footer>
</div>
</body>
由于执行的顺序，你可以向视图中传递一个叫作body的属性，而且它会在视图中正确渲染。然而，当布局被渲染时，body的值会被已渲染的视图覆盖。
在Express中使用（或不使用）布局###
- 当我们创建视图引擎时，会指定一个默认的布局：
var handlebars = require('express3-handlebars').create({ defaultLayout: 'main' });
- 默认情况下，Express会在views子目录中查找视图，在views/layouts下查找布局。所以如果有一个叫作views/foo.handlebars的视图，可以这样渲染它：
app.get('/foo', function(req, res){
res.render('foo');
});
它会使用views/layouts/main.handlebars作为布局。
- 如果你根本不想使用布局（这意味着在视图中你不得不拥有所有的样板文件），可以在上下文中指定
layout: null：
app.get('/foo', function(req, res){
res.render('foo', { layout: null });
});
- 如果你想使用一个不同的模板，可以指定模板名称：
app.get('/foo', function(req, res){
res.render('foo', { layout: 'microsite' });
});
这样就会使用布局views/layouts/microsite.handlebars来渲染视图了。
局部文件###
很多时候，有些组成部分（在前端界通常称为“组件”）需要在不同的页面重复使用。使用模板来实现这一目标的唯一方法是使用局部文件（partial，如此命名是因为它们并不渲染整个视图或整个网页）。
- 首先，创建一个局部文件，views/partials/weather.handlebars：
<div class="weatherWidget">
{{#each partials.weather.locations}}
<div class="location">
<h3>{{name}}</h3>
<a href="{{forecastUrl}}">
<img src="{{iconUrl}}" alt="{{weather}}">
{{weather}}, {{temp}}
</a>
</div>
{{/each}}
<small>Source: <a href="http://www.wunderground.com">Weather
Underground</a></small>
</div>
**请注意，我们使用partials.weather为开头来命名上下文。我们想在任何页面上使用局部文件，但上述做法实际上并不会将上下文传递给每一个视图，因此可以使用res.locals（对于任何视图可用）。但是我们并不想让个别的视图干扰指定的上下文，于是将所有的局部文件上下文都放在partials对象中。
**
- 创建一个方法来获取当前天气数据：
function getWeatherData(){
return {
locations: [
{
name: 'Portland',
forecastUrl: 'http://www.wunderground.com/US/OR/Portland.html',
iconUrl: 'http://icons-ak.wxug.com/i/c/k/cloudy.gif',
weather: 'Overcast',
temp: '54.1 F (12.3 C)',
},
{
name: 'Bend',
forecastUrl: 'http://www.wunderground.com/US/OR/Bend.html',
iconUrl: 'http://icons-ak.wxug.com/i/c/k/partlycloudy.gif',
weather: 'Partly Cloudy',
temp: '55.0 F (12.8 C)',
},
{
name: 'Manzanita',
forecastUrl: 'http://www.wunderground.com/US/OR/Manzanita.html',
iconUrl: 'http://icons-ak.wxug.com/i/c/k/rain.gif',
weather: 'Light Rain',
temp: '55.0 F (12.8 C)',
},
],
};
}
- 创建一个中间件给res.locals.partials对象添加这些数据:
app.use(function(req, res, next){
if(!res.locals.partials) res.locals.partials = {};
res.locals.partials.weather = getWeatherData();
next();
});
- 在视图中使用这个局部文件。例如，为将我们的组件放在主页上，编辑views/home.handlebars：
<h2>Welcome to Meadowlark Travel!</h2>
{{> weather}}
语法{{> partial_name}}可以让视图中包含一个局部文件。express3-handlebars会在views/partials中寻找一个叫作partial_name.handle‐bars的视图（或是weather.handlebars)
express3-handlebars支持子目录，所以如果你有大量的局部文件，可以将它们组织在一起。例如，你有一些社交媒体局部文件，可以将它们放在views/partials/social目录下面，然后使用{{> social/facebook}}、{{>social/twitter}}等来引入它们。
段落###
我从微软的优秀模板引擎Razor中借鉴了段落（section）的概念。如果所有的视图在你的布局中都正好放在一个单独的元素里，布局会正常运转，但是当你的视图本身需要添加到布局的不同部分时会发生什么？一个常见的例子是，视图需要向<head>元素中添加一些东西，或是插入一段使用jQuery的<script>脚本（这意味着必须引入jQuery，由于性能原因，有时在布局中这是最后才做的事）。
Handlebars和express3-handlebars都没有针对于此的内置方法。幸运的是，Handlebars的辅助方法让整件事情变得简单起来。当我们实例化Handlebars对象时，会添加一个叫作section的辅助方法：
var handlebars = require('express3-handlebars').create({
defaultLayout:'main',
helpers: {
section: function(name, options){
if(!this._sections) this._sections = {};
this._sections[name] = options.fn(this);
return null;
}
}
});
现在我们可以在视图中使用section辅助方法了。让我们创建一个视图（views/jquerytest. handlebars），在<head>中添加一些东西，并添加一段使用jQuery的脚本：
{{#section 'head'}}
<!-- we want Google to ignore this page -->
<meta name="robots" content="noindex">
{{/section}}
<h1>Test Page</h1>
<p>We're testing some jQuery stuff.</p>
{{#section 'jquery'}}
<script>
$('document').ready(function(){
$('h1').html('jQuery Works');
});
</script>
{{/section}}
现在在这个布局里，我们可以像放置{{{body}}}一样放置一个段落:
<!doctype html>
<html>
<head>
<title>Meadowlark Travel</title>
{{{_sections.head}}}
</head>
<body>
{{{body}}}
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
{{{_sections.jquery}}}
</body>
</html>
客户端Handlebars###
AJAX调用可以返回HTML片段，并将其原样插入DOM中，但是客户端Handlebars允许我们使用JSON数据接收AJAX调用结果，并将其格式化以适应我们的网站。因此，在与第三方API（返回JSON数据，而不是适应你网站的格式化HTML文本）通信时尤其有用。
在客户端使用Handlebars之前，我们需要加载Handlebars。我们既可以将Handlebars放在静态资源中引入，也可以使用一个CDN
{{#section 'head'}}
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/
handlebars.min.js"></script>
{{/section}}
现在需要找个地方放模板,一种方法是使用在HTML中已存在的元素，最好是一个隐藏的元素。你可以将它放在<head>中的<script>元素里。这看起来有点奇怪，但是运行良好：
{{#section 'head'}}
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script id="nurseryRhymeTemplate" type="text/x-handlebars-template">
Marry had a little <b>{{animal}}</b>, its <b>{{bodyPart}}</b>
was <b>{{adjective}}</b> as <b>{{noun}}</b>.
</script>
{{/section}}
请注意，我们必须转义至少一个大括号，否则，服务器端视图会尝试对其进行替换。
在使用模板之前，我们需要编译它：
{{#section 'jquery'}}
$(document).ready(function(){
var nurseryRhymeTemplate = Handlebars.compile(
$('#nurseryRhymeTemplate').html());
});
{{/section}}
我们需要一个放置已渲染模板的地方。出于测试的目的，我们添加两个按钮，一个通过JavaScript来直接渲染，另一个通过AJAX调用来渲染：
<div id="nurseryRhyme">Click a button....</div>
<hr>
<button id="btnNurseryRhyme">Generate nursery rhyme</button>
<button id="btnNurseryRhymeAjax">Generate nursery rhyme from AJAX</button>
最后是渲染模板的代码：
{{#section 'jquery'}}
<script>
$(document).ready(function(){
var nurseryRhymeTemplate = Handlebars.compile(
$('#nurseryRhymeTemplate').html());
var $nurseryRhyme = $('#nurseryRhyme');
$('#btnNurseryRhyme').on('click', function(evt){
evt.preventDefault();
$nurseryRhyme.html(nurseryRhymeTemplate({
animal: 'basilisk',
bodyPart: 'tail',
adjective: 'sharp',
noun: 'a needle'
}));
});
$('#btnNurseryRhymeAjax').on('click', function(evt){
evt.preventDefault();
$.ajax('/data/nursery-rhyme', {
success: function(data){
$nurseryRhyme.html(
nurseryRhymeTemplate(data))
}
});
});
});
</script>
{{/section}}
针对nursery rhyme页和AJAX调用的路由处理程序：
app.get('/nursery-rhyme', function(req, res){
res.render('nursery-rhyme');
});
app.get('/data/nursery-rhyme', function(req, res){
res.json({
animal: 'squirrel',
bodyPart: 'tail',
adjective: 'bushy',
noun: 'heck',
});
});
**从本质上讲，Handlebars.compile接收一个模板，返回一个方法。这个方法接收一个上下文对象，返回一个已渲染字符串。所以一旦我们编译了模板，就可以像调用方法函数一样重用模板渲染。
**