node.js 使用心得（2）--- 部分视图 - partial

HBS模板引擎中partial的用法

1.HBS的介绍

hbs是Express提供的视图引擎, 是对Handlerbars的封装，在我们写node的的时候，可以使用hbs中的partial来进行局部模板的使用，增加代码的复用性。

2.partial的注册

要使用partial来将我们的部分模块或视图封装起来复用，首先我们需要在app.js中引入一个我们定义好的partial模块

const helper = require('./partial');//注册hbs帮助方法

接着我们进入我们创建好的./partial/index.js中创建我们的partial

const hbs = require('hbs');//导入hbs库，扩展handlebars
const helpers = require('handlebars-helpers');//helpers库
const path = require('path'); // 处理路径相关

// 注册partial目录
console.log(path.join(__dirname, '../views/partials'));
hbs.registerPartials(path.join(__dirname, '../views/partials'))

这样，我们注册好了partical中目录，我是注册在了views下的partical文件夹中

 ├──  views
    └──partica
    	└── nav.hbs
    	└── layout.hbs
    	└── error.hbs
    	└── win.hbs
    	└── header.hbs

我在views文件夹下面创建了四个用来复用的partial（部分视图）
nav.hbs—分页partial代码

<div class="pagination">
    <a class="first-page {{#unless first}}disabled{{/unless}}"
       {{#if first}}href="?page=1"{{/if}}>
        <span>第一页</span>
    </a>
    <ul class="pagination-box">
        <!--上一页-->
        <li class="pagination-prev {{#unless prev}}disabled{{/unless}}">
        <a class="pagination-item-link"
            {{#if prev}}href="?page={{minusOne page}}"{{/if}}>
            </a>
        </li>
        <!--页码-->
        <li class="pagination-pager">
            <input type="text" value="{{page}}">
            <span class="pagination-slash">／</span>{{total}}</li>
        <!--下一页-->
        <li class="pagination-next {{#unless next}}disabled{{/unless}}">
        <a class="pagination-item-link"
            {{#if next}}href="?page={{addOne page}}"{{/if}}>
            </a>
        </li>
    </ul>
        <a class="last-page {{#unless last}}disabled{{/unless}}"
    {{#if last}}href="?page={{total}}"{{/if}}>最后页
   </a>
</div>

3.partial的使用

{{#> error}}
    出现错误时，您会看到这句话
{{/error}}

<!--使用块级partial传递内容-->
{{#> win}}
    <div>这是窗口里面的内容。。。。。。。。。。。。。</div>
{{/win}}


// 使用布局partial
{{#> layout}}
    {{#*inline 'top'}}
        这是top
    {{/inline}}
    {{#*inline 'foo'}}
        这是foo
    {{/inline}}
    {{#*inline 'bar'}}
        这是bar
    {{/inline}}
{{/layout}}

{{#> nav}}
{{/nav}}

partical的使用方法喂{{#> 注册的partial文件的名字} } 这样子写的partial就可以在你想用的地方多次使用，配合helper，十分灵活，大大提高node中编写前台部分的可读性以及代码的优雅。