express－9 Handlebars模板引擎(2)

视图和布局###

视图通常表现为网站上的各个页面（它也可以表现为页面中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>&copy;{{copyrightYear}} Meadowlark Travel</footer>

       </div>

</body>

express－9 Handlebars模板引擎(2)

由于执行的顺序，你可以向视图中传递一个叫作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接收一个模板，返回一个方法。这个方法接收一个上下文对象，返回一个已渲染字符串。所以一旦我们编译了模板，就可以像调用方法函数一样重用模板渲染。

秒客网

express－9 Handlebars模板引擎(2)

视图和布局###

在Express中使用（或不使用）布局###

局部文件###

段落###

客户端Handlebars###

相关文章