NodeJS - Express 3.0下ejs模板使用 partial展現 片段視圖

標籤：style   blog   class   code   tar   width   

如果你也在看Node.js開發指南,如果你也在一步一步實現 microBlog 項目!也許你會遇到本文提到的問題,如果你用的是Express 3.0

本書執行個體背景是 Express 2.0 而如今升級到 3.0後去掉了一些老的方法也更新了一些新的,所以變化還是蠻大的.

首先上一篇部落格提到的一個問題:

如何用Express 3.0 產生一個 ejs 模板項目

前提是你已經下載了ejs包,如何下載,運行cmd 輸入 npm install ejs -g

2.0 下的文法是:express -t ejs microblog 

3.0下的文法是:express -e ejs microblog  (-t已經失效,取而代之的是 -e ,而3.0預設產生的是 jade 模板,此模板作者正是Express作者)

如何用Express 3.0 使用片段視圖

就像asp.net裡面的使用者自訂控制項,可以代碼重用,相同的視圖片段可以直接調用

2.0下的文法是:ejs模板檔案裡直接這樣寫 <ul><%- partial(‘listitem’,items) %></ul>    partial() 正是調用片段視圖函數,接受2個參數,參數一表示模板名,參數二表示出入的對象資料.

3.0下使用相對麻煩點:

此方法在3.0下獨立成了一個Express 的外掛程式,所以要提前下載

(1)運行cmd 輸入:npm install express-partials -g  

(2)下載成功後.在app.js 中引用此外掛程式   var partials = require(‘express-partials’);

(3)然後再開啟此外掛程式, 在app.js 中 app.set(‘view engine’, ‘ejs’);  代碼後添加如下代碼:  app.use(partials());

(4)package.json 裡 dependencies 配置項添加  ”express-partials”: “*”   注意格式,下面列出 package.json 全部內容

1 2 3 4 5 6 7 8 9 10 11 12 13

{ "name": "application-name", "version": "0.0.1", "private": true, "scripts": { "start": "node app.js" }, "dependencies": { "express": "3.3.4", "ejs": "*", "express-partials": "*" } }

你可以直接複製上面的內容覆蓋 package.json元內容

截止到此處你的Express 3.0下就可以使用 partial 片段視圖了.

在view模板檔案夾下建立 list.ejs 檔案,內容是: <ul><%- partial(‘listitem’,items) %></ul>  和 listitem.ejs  內容是:<li><%= listitem %></li>

然後app.js 裡添加一個路由來運行 list 模板建立的html頁面.

添加路由控制如下:

1 2 3 4 5

app.get(‘/list‘,function(req,res){ res.render(‘list‘,{title:‘List‘, items:[‘xiaoxiao‘,‘moke‘,‘isoso‘,‘webUI‘] }); });

儲存,運行 app.js ,請求路徑:localhost:3000/list