部分視圖 - partial

對於partia來講，能夠理解爲組件化的運用，即將對應的html/js/css進行封裝，而後經過模板引擎直接進行調用

一、partial的註冊

1 //能夠直接寫在app.js,也能夠寫在以前所說的helper裏面，由於是作註冊，因此須要作的是配置化的處理
2 const hbs = require('hbs');//導入hbs庫，擴展handlebars
3 const path = require('path'); // 處理路徑相關
4 
5 // 註冊partial目錄，即之後直接在對應的partials文件夾內去建partial文件進行調用便可
6 hbs.registerPartials(path.join(__dirname, '../views/partials'))

當註冊完畢以後，能夠開始寫partial視圖了，以layout模板爲例，直接在partials文件夾中創建一個 名爲 nav.hbs文件，而後把一段nav導航欄模塊的html寫進nav文件中，（能夠將html中的css樣式直接提取到<style>標籤中來）

 1 <div class="nav">
 2     <div class="left-logo">
 3         <a href="/"><img src="../images/logo-new.png" alt="" style="opacity: 0;"></a>
 4     </div>
 5     <div class="right-view">
 6         <ul class="right-text">
 7             <li class="vip hover-li" style="position: relative;">
 8                 <a href="/vip-course"><span>VIP課
 9               <i class="anticon anticon-plus plus"></i>
10               <i class="anticon anticon-minus minus"></i>
11             </span>
12                 </a>
13                 <div class="menu-second">
14                     <i class="anticon anticon-caret-up caret-up"></i>
15                     <i class="anticon anticon-caret-up caret-up-cover"></i>
16                     <div class="menu-content">
17                         <div style="overflow: hidden; padding: 0px 43px;">
18                             <p class="vip-title">VIP課程</p>
19                             {{#each vipcourses}}
20                                 {{#if (checkEven @index)}}
21                                     <a href="{{url}}">
22                                         <div class="row-course left-course">
23                                             <img class="course-img" src="{{ico}}" alt="">
24                                             <div class="course-text">
25                                                 <p class="course-name">{{name}}</p>
26                                                 <p class="course-describe">{{desc}}</p>
27                                             </div>
28                                         </div>
29                                     </a>
30                                 {{else}}
31                                     <a href="{{url}}">
32                                         <div class="row-course ">
33                                             <img class="course-img" src="{{ico}}" alt="">
34                                             <div class="course-text">
35                                                 <p class="course-name">{{name}}</p>
36                                                 <p class="course-describe">{{desc}}</p>
37                                             </div>
38                                         </div>
39                                     </a>
40                                 {{/if}}
41                             {{/each}}
42                         </div>
43                     </div>
44                 </div>
45             </li>
46             <li><a href="/open-course">公開課</a></li>
47             <li><a href="/study-center">
48                 <img src="../images/grey1.png" class="study-icon-grey">
49                 <img src="../images/blue1.png" class="study-icon-blue">
50                 <div class="text-left">學習中心</div>
51             </a>
52             </li>
53         </ul>
54     </div>
55     <div class="toggle-bar">
56         <img class="bar" src="https://img.kaikeba.com/nav.png" alt="" style="width: 24px; height: 20px; position: absolute; top: 16px; display: block;">
57         <img src="https://img.kaikeba.com/delete.png" alt="" style="width: 20px; height: 20px; position: absolute; top: 16px; display: none;">
58     </div>
59 </div>

提取完畢以後就能夠直接在模板引擎中進行引用{{> nav}} 也支持參數的傳遞

1 //往partial中傳遞數據 data （字符串、數組、集合均可以，僅支持單一數據，不支持表達式）
2 {{> nav name=data}}
3 
4 //若須要傳遞多個參數，直接在後面追加便可
5 {{>nav name=data title=jdata}}
6 
7 //在partial中接收該字符串
8 {{name}}

二、動態partial

動態partial是指在某些特定的狀況下，咱們不知道該用哪一個partial去作佈局，或者說須要對於頁面引用的partial去作動態化配置與使用；

須要經過撰寫一個相應的helper來進行處理，主要的也就是經過這個helper方法，在partial應用的時候進行動態partial名稱的替換

1 //動態Partial
2 hbs.registerHelper('whichPartial',function (name) {
3     return name;
4 })
5 
6 //頁面中應用  根據不一樣條件去給navname賦值，以此識別對應的partial
7 {{> (whichPartial navname)}}

三、 塊級部分視圖 partial-block

塊級部分視圖與partial大體相似，可是在應用層面會相對比較靈活，主要有如下幾種用法，對應的語法與partial有點不一樣，在調用的語法主要是{{#> @partial-block}}{{/@partial-block}},與一些經常使用的html標籤有點相似。

錯誤處理：

//對於partial視圖找不到的狀況，能夠適用，能夠結合動態的partial進行使用
{{#> ooxx}}
   出現錯誤時，您會看到這句話！
 {{#> ooxx}}

使用塊級partial傳遞內容

 1 <!--定義名爲win的partial頁面-->
 2 <div class="win">
 3     <div class="win-title">{{title}}</div>    
 4     {{> @partial-block}}
 5 </div>
 6 
 7 //調用塊級partial的方法，其中參數的傳遞也是跟partial差很少，能夠傳遞多種類型的參數，也能夠傳遞多個參數，但參數不能是表達式
 8 {{#> win title="22222"}}
 9      //此段的代碼表示的是傳遞到以上的 {{> @partial-block}} 的位置
10     <div>這是窗口裏面的內容。。。。。。。。。。。。。</div>
11 {{/win}}

聲明佈局partial

 1 <!-定義命名爲layout的partial 對於下面的top foo bar 均可以進行動態的傳遞內容-->
 2 <!--上面容器-->
 3 <div class="top">
 4     {{> top}}
 5 </div>
 6 <!--下面容器-->
 7 <div class="content">
 8     <div class="left">
 9         {{> foo}}
10     </div>
11     <div class="right">
12         {{> bar}}
13     </div>
14 </div>
15 
16 <!--對於佈局類型partial的調用->
17 <!--佈局組件-->
18 {{#> layout}}
19     {{#*inline 'top'}} //表明在上面top傳遞的內容
20         這是top
21     {{/inline}}
22     {{#*inline 'foo'}}
23         這是foo
24     {{/inline}}
25     {{#*inline 'bar'}}
26         這是bar
27     {{/inline}}
28 {{/layout}}