node的模板：Handlebars

　　(1)①如果上下文对象是：{ name: 'Buttercup' },

　　　  模板是<p>Hello, {{name}}!</p>

　　　　将输出Hello,Buttercup! 

　　　 ②如果上下文对象是：{ name: '<b>Buttercup</b>' },要想输出不转义的变量，需要这么写：<p>Hello, {{{name}}}!</p>

　　　　 三个{}保证html标签被解析

　　　 ③注释：{{! super-secret comment }}

　　　　　　　 <!-- not-so-secret comment -->

　　　　　假如这是一个服务器模板，第一个注释将不会被传递到浏览器

　　(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' ],
}

//使用 ../ 来访问上一级上下文 ,if块会产生一个新的上下文，因此如果在each块中使用if，需要注意上下文问题

<ul>
    {{#each tours}}
    <li>
        {{name}} - {{price}}
        {{#if ../currencies}}
            ({{../../currency.abbrev}})
        {{/if}}
    </li>
    {{/each}}
</ul>    

{{#unless currencies}}
    <p>All prices in {{currency.name}}.</p>
{{/unless}}

{{#if specialsUrl}}
    <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>    

 在 if 和 each 块中都有一个可选的 else 块(对于 each,如果数组中没有任何元素,else 块就会执行)。我们也用到了 unless 辅助方法,它基本上和 if 辅助方法是相反的:只有在 参数为 false 时,它才会执行。 

 (3)在express中使用/不使用布局：布局文件在express的views/loyouts目录下

　　var handlebars = require('express3-handlebars') .create({ defaultLayout: 'main' }); //默认该js下的页面视图使用此布局

　　app.get('/foo', function(req, res){

　　　　res.render('foo');

　　}); 

//如果你根本不想使用布局(这意味着在 视图中你不得不拥有所有的样板文件),可以在上下文中指定 layout: null:
app.get('/foo', function(req, res)
    { res.render('foo', { layout: null });
});

//或者,如果你想使用一个不同的模板,可以指定模板名称:这样就会使用布局 views/layouts/microsite.handlebars 来渲染视图了。
app.get('/foo', function(req, res){ 
    res.render('foo', { layout: 'microsite' });
});

 

（4）局部组件：如果在网站中有一部分组件<div>等需要在不同的页面复用，需要单独拿出来作为局部组件，在express架构下默认目录views/partials/

　　创建weather.handlebars文件：

<div class="weatherWidget">
    {{#each partials.weather.locations}} 
　　　　<div class="location">
        　　<h3>{{name}}</h3>
        　　<a href="{{forecastUrl}}"></a> 
　　　　</div>
       <img src="{{iconUrl}}" alt="{{weather}}">
       {{weather}}, {{temp}} 
    {{/each}}
    <small>Source: <a href="http://www.wunderground.com">Weather Underground</a></small>
</div>

 

在主程序js文件中模拟假数据：

//获取天气信息函数,模拟数据
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();
});

 

结束后，例如我们将组件放在main.handlwbars里面：

{{> weather}} 

语法{{> partial_name}}可以让你在视图中包含一个局部文件。express3-handlebars会 在 views/partials 中寻找一个叫作 partial_name.handle-bars 的视图 

组件可以放在views/partials/...目录下