handlebars模板引擎

handlebars

目前最流行的后端模板引擎之一，可在HTML页面中直接获取后端输出的值。

后端渲染

以下代码是关于server端往前端返回数据(也可能是保存到全局)的示例代码。
- res.render表名加载modules/core/server/views/index对应匹配到的文件。
- 可以匹配到的文件例如(modules/core/server/views/index.html或modules/core/server/views/index.server.html)
- 将两个JSON对象封装为一个JSON返回数据
- res.render的功能是把视图(数据)返回给客户端
- res.render使用app.render实现，其中app.render的功能是生成视图(数据)

res.render('modules/core/server/views/index', {    user: JSON.stringify(safeUserObject),    config: JSON.stringify(sysConfig)});

前端接收数据

block ?

• 父模板文件

将子模板的数据放在这里，通过"content"匹配。

{{{block "content"}}}

• 子模板文件
  
  • 在js中引入模板对象需使用三花括号。
  • HTML中引入模板对象若使用两个{{}}会将对象直接输出 比如<p>Interesting</p>
  • HTML中引入模板对象若使用三个{{{}}}会将对象会转义后输出 比如$lt;p$gt;Interesting$lt;/p$gt;
  • 建议，尽量使用三个大括号{{{}}}
  • 子模板引擎需放置在

<!--设置父模板路径-->{{!< layout.server.view.html}}  <!--设置父模板中插入的内容-->{{#contentFor "content"}}<!--插入主要页面--><section ui-view></section><!--将用户对象和配置文件--><script type="text/javascript">//将模板对象user和config设置为全局对象  var user = {{{ user }}};  var config = {{{ config }}};</script>{{/contentFor}}

内置表达式

each

通过遍历数组来渲染页面。

比如我们在加载css文件时可以将所依赖的css文件放置到一个数组，通过each来引用。

cssLibFiles为一个存放所有css文件的数组，通过each表达式引用。

<!-- Application CSS Files -->{{#each cssLibFiles}}<link rel="stylesheet" href="{{this}}">{{/each}}

each表达式其中可以加else块，若each遍历的对象为空，else快就会执行。

if else

指定条件渲染dom,条件通过布尔转换为假(特例为[])，则停止渲染此模块的内容。

以加载谷歌页面分析的代码为例。

当googleAnalyticsTrackingID存在，则执行script标签内的分析代码

{{#if googleAnalyticsTrackingID}}    <script>      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');      ga('create', '{{googleAnalyticsTrackingID}}', 'auto');      ga('send', 'pageview');    </script>{{else}}    <script>    console.log({{error}});    </script>{{/if}}

unless

用法与if刚好相反，当判断条件为假则开始执行。

{{#unless data}}<ul id="list">      {{#each list}}        <li>{{this}}</li>    {{/each}}</ul>  {{else}}    <p>{{error}}</p>{{/unless}}

开始觉得表达式if else与unless重复了，后来在使用过程冲发现模板引擎中的条件语句不支持!操作符进行条件反选，应此在使用过程中这两种表达式都很可能被用到

注释

{{! test commit}}<!-- test commit-->

对于以上两句注释，第一句不会传递到浏览器，在HTML源文件中无法找到该注释；第二句注释会暴露在HTML代码中。

服务器端模板

使用node包express3-handlebars让express提供handlebars。

app.engine('server.view.html', hbs.express4({    extname: '.server.view.html'}));app.set('view engine', 'server.view.html');app.set('views', path.resolve('./'));

• extname设置扩展名
• path.resolve()方法将一系列路径或路径段解析为绝对路径。
• app.set(name,value)用于给某个键赋值。比如以下最基本得用法

app.set('title', 'My Site');app.get('title'); // "My Site"

END