部分视图 - partial

对于partia来说，可以理解为组件化的运用，即将对应的html/js/css进行封装，然后通过模板引擎直接进行调用

1、partial的注册

 //可以直接写在app.js,也可以写在之前所说的helper里面，因为是做注册，所以需要做的是配置化的处理

 const hbs = require('hbs');//导入hbs库，扩展handlebars

 const path = require('path'); // 处理路径相关

 // 注册partial目录，即以后直接在对应的partials文件夹内去建partial文件进行调用即可

 hbs.registerPartials(path.join(__dirname, '../views/partials'))

当注册完毕之后，可以开始写partial视图了，以layout模板为例，直接在partials文件夹中建立一个 名为 nav.hbs文件，然后把一段nav导航栏模块的html写进nav文件中，（可以将html中的css样式直接提取到<style>标签中来）

 <div class="nav">

     <div class="left-logo">

         <a href="/"><img src="../images/logo-new.png" alt="" style="opacity: 0;"></a>

     </div>

     <div class="right-view">

         <ul class="right-text">

             <li class="vip hover-li" style="position: relative;">

                 <a href="/vip-course"><span>VIP课

               <i class="anticon anticon-plus plus"></i>

               <i class="anticon anticon-minus minus"></i>

             </span>

                 </a>

                 <div class="menu-second">

                     <i class="anticon anticon-caret-up caret-up"></i>

                     <i class="anticon anticon-caret-up caret-up-cover"></i>

                     <div class="menu-content">

                         <div style="overflow: hidden; padding: 0px 43px;">

                             <p class="vip-title">VIP课程</p>

                             {{#each vipcourses}}

                                 {{#if (checkEven @index)}}

                                     <a href="{{url}}">

                                         <div class="row-course left-course">

                                             <img class="course-img" src="{{ico}}" alt="">

                                             <div class="course-text">

                                                 <p class="course-name">{{name}}</p>

                                                 <p class="course-describe">{{desc}}</p>

                                             </div>

                                         </div>

                                     </a>

                                 {{else}}

                                     <a href="{{url}}">

                                         <div class="row-course ">

                                             <img class="course-img" src="{{ico}}" alt="">

                                             <div class="course-text">

                                                 <p class="course-name">{{name}}</p>

                                                 <p class="course-describe">{{desc}}</p>

                                             </div>

                                         </div>

                                     </a>

                                 {{/if}}

                             {{/each}}

                         </div>

                     </div>

                 </div>

             </li>

             <li><a href="/open-course">公开课</a></li>

             <li><a href="/study-center">

                 <img src="../images/grey1.png" class="study-icon-grey">

                 <img src="../images/blue1.png" class="study-icon-blue">

                 <div class="text-left">学习中心</div>

             </a>

             </li>

         </ul>

     </div>

     <div class="toggle-bar">

         <img class="bar" src="https://img.kaikeba.com/nav.png" alt="" style="width: 24px; height: 20px; position: absolute; top: 16px; display: block;">

         <img src="https://img.kaikeba.com/delete.png" alt="" style="width: 20px; height: 20px; position: absolute; top: 16px; display: none;">

     </div>

 </div>

提取完毕之后就可以直接在模板引擎中进行引用{{> nav}} 也支持参数的传递

 //往partial中传递数据 data （字符串、数组、集合都可以，仅支持单一数据，不支持表达式）

 {{> nav name=data}}

 //若需要传递多个参数，直接在后面追加即可

 {{>nav name=data title=jdata}}

 //在partial中接收该字符串

 {{name}}

2、动态partial

动态partial是指在某些特定的情况下，我们不知道该用哪个partial去做布局，或者说需要对于页面引用的partial去做动态化配置与使用；

需要通过撰写一个相应的helper来进行处理，主要的也就是通过这个helper方法，在partial应用的时候进行动态partial名称的替换

 //动态Partial

 hbs.registerHelper('whichPartial',function (name) {

     return name;

 })

 //页面中应用  根据不同条件去给navname赋值，以此识别对应的partial

 {{> (whichPartial navname)}}

3、 块级部分视图 partial-block

块级部分视图与partial大致类似，但是在应用层面会相对比较灵活，主要有以下几种用法，对应的语法与partial有点不同，在调用的语法主要是{{#> @partial-block}}{{/@partial-block}},与一些常用的html标签有点类似。

错误处理：

//对于partial视图找不到的情况，可以适用，可以结合动态的partial进行使用

{{#> ooxx}}

   出现错误时，您会看到这句话！

 {{#> ooxx}}

使用块级partial传递内容

 <!--定义名为win的partial页面-->

 <div class="win">

     <div class="win-title">{{title}}</div>

     {{> @partial-block}}

 </div>

 //调用块级partial的方法，其中参数的传递也是跟partial差不多，可以传递多种类型的参数，也可以传递多个参数，但参数不能是表达式

 {{#> win title="22222"}}

      //此段的代码表示的是传递到以上的 {{> @partial-block}} 的位置

     <div>这是窗口里面的内容。。。。。。。。。。。。。</div>

 {{/win}}

声明布局partial

 <!-定义命名为layout的partial 对于下面的top foo bar 都可以进行动态的传递内容-->

 <!--上面容器-->

 <div class="top">

     {{> top}}

 </div>

 <!--下面容器-->

 <div class="content">

     <div class="left">

         {{> foo}}

     </div>

     <div class="right">

         {{> bar}}

     </div>

 </div>

 <!--对于布局类型partial的调用->

 <!--布局组件-->

 {{#> layout}}

     {{#*inline 'top'}} //代表在上面top传递的内容

         这是top

     {{/inline}}

     {{#*inline 'foo'}}

         这是foo

     {{/inline}}

     {{#*inline 'bar'}}

         这是bar

     {{/inline}}

 {{/layout}}