視圖 · ThinkJs2.0開發手冊

# 視圖 [TOC=2,3] 視圖即模版，默認的根目錄為?`view/`。 ## 視圖文件視圖文件默認的規則為?`模塊/控制器_操作.html`。假如 URL?`home/article/detail`?解析后的模塊是?`home`，控制器是?`article`，操作是?`detail`，那么對應的視圖文件為?`home/article_detail.html`。 ## 視圖配置視圖默認配置如下，可以在配置文件?`src/common/config/view.js`?中修改： ~~~ export default { content_type: "text/html", //輸出模版時發送的 Content-Type file_ext: ".html", //文件的擴展名 file_depr: "_", //控制器和操作之間的連接符 root_path: think.ROOT_PATH + "/view", //視圖文件的根目錄 type: "ejs", //模版引擎 options: {} //模版引擎需要的配置項 }; ~~~ `注：`?視圖默認根目錄在?`view/`。如果想每個模塊有獨立的視圖目錄，將配置?`root_path`?修改為空即可。 ### 修改連接符默認控制器和操作之間的連接符是?`_`，文件名類似為?`index_index.html`，如果想將控制器作為一層目錄的話，可以將連接符修改為?`/`。 ~~~ export default { file_depr: "/" } ~~~ ## 模版引擎 ThinkJS 默認支持的模版引擎有：`ejs`，`jade`，`swig`?和?`nunjucks`，默認模版引擎為?`ejs`，可以根據需要修改為其他的模版引擎。 ### ejs #### 定界符 ejs 默認的定界符是?`<%`?和?`%>`。如果想修改定界符，可以通過配置里的?`options`?來修改，如： ~~~ export default { options: { delimiter: "&" //將定界符修改為 <& 和 &> } } ~~~ #### 變量輸出 * 轉義輸出?`<%= data.name%>` * 不轉義輸出?`<%- data.name%>` * 注釋?`<%# data.name%>` #### 條件判斷 ~~~ <%if(data.name === "1"){%> <p>...</p> <%}else if(data.name === "2"){%> <p>...</p> <%}else{%> <p>...</p> <%}%> ~~~ #### 循環 ~~~ <%list.forEach(function(item)){%> <li><%=item.name%></li> <%}%> ~~~ #### 引用文件 ejs 不支持模版繼承。但可以將公用的模版獨立成一個文件，然后通過?`include`?來引入。 ~~~ <%include inc/header.html%> ~~~ `注：`?ejs 模版使用的變量需要在控制器中賦值，否則會報錯。更多 ejs 使用文檔請見?[這里](https://www.npmjs.com/package/ejs)。 ### nunjucks nunjucks 是一款類似于 jinja2 的模版引擎，功能異常強大，復雜項目建議使用該模版引擎。 #### 定界符塊級定界符為?`{%`?和?`%}`，變量定界符為?`{{`?和?`}}`，注釋定界符為?`<#`?和?`#>`。如： ~~~ {{ username }} {% block header %} This is the default content {% endblock %} ~~~ #### 變量輸出可以通過?`{{ username }}`?來輸出變量，默認輸出的變量會自動轉義，如果不想被轉義，可以通過?`{{ username | safe }}`?來處理。 #### 模版繼承父級模版： ~~~ {% block header %} This is the default content {% endblock %} <section class="left"> {% block left %}{% endblock %} </section> <section class="right"> {% block right %} This is more content {% endblock %} </section> ~~~ 子級模版： ~~~ {% extends "parent.html" %} {% block left %} This is the left side! {% endblock %} {% block right %} This is the right side! {% endblock %} ~~~ #### 條件判斷 ~~~ {% if hungry %} I am hungry {% elif tired %} I am tired {% else %} I am good! {% endif %} ~~~ #### 循環 ~~~ <h1>Posts</h1> <ul> {% for item in items %} <li>{{ item.title }}</li> {% else %} <li>This would display if the "item" collection were empty</li> {% endfor %} </ul> ~~~ 具體使用文檔請見?[這里](http://jinja.pocoo.org/docs/dev/)。 ### jade jade 模版使用方式請見?[這里](https://github.com/jadejs/jade)。 ### swig swig 模版使用方式請見?[這里](http://paularmstrong.github.io/swig/)。 ### 擴展模版引擎模版引擎使用 Adapter 實現。如果項目里需要使用其他模版引擎，可以通過 Adapter 進行擴展，具體請見?[這里](https://thinkjs.org/zh-CN/doc/2.0/adapter_template.html)。 ## 變量賦值控制器中可以通過?`assign`?方法進行變量賦值。 #### 賦值單個變量 ~~~ export default class extends think.controlle.base { indexAction(){ this.assign("title", "ThinkJS 官網"); } } ~~~ #### 賦值多個變量 ~~~ export default class extends think.controlle.base { indexAction(){ this.assign({ title: "ThinkJS 官網", author: "thinkjs" }); } } ~~~ #### 獲取賦值變量賦值后也可以通過?`assign`?來獲取賦過的值。如： ~~~ export default class extends think.controlle.base { indexAction(){ this.assign("title", "ThinkJS 官網"); let title = this.assign("title"); } } ~~~ ## 模版渲染可以通過?`display`?方法進行模版渲染。如果不傳具體的模版文件路徑，會自動查找。如： ~~~ export default class extends think.controller.base { indexAction(){ this.display();// render home/index_index.html } } ~~~ 也可以指定具體的模版文件進行渲染，關于?`display`?方法的詳細使用請見?[這里](https://thinkjs.org/zh-CN/doc/2.0/api_controller.html#controllerdisplaytemplatefile)。 ## 獲取渲染后的內容如果有時候不想支持輸出模版，而是想獲取渲染后的模版內容，那么可以通過?`fetch`?方法來獲取。 #### ES6 方式 ~~~ export default class extends think.controller.base { * indexAction(){ let content = yield this.fetch(); ... } } ~~~ #### 動態創建類的方式 ~~~ module.exports = think.controller({ indexAction: function(){ this.fetch().then(function(content){ ... }) } }) ~~~ 關于?`fetch`?方法的詳細使用方式請見?[這里](https://thinkjs.org/zh-CN/doc/2.0/api_controller.html#controllerfetchtemplatefile)。 ## 國際化啟動國際化后，視圖路徑會多一層國際化的目錄。如：具體的視圖路徑變為?`view/zh-CN/home/index_index.html`，其中?`zh-CN`?為語言名。關于如果使用國際化請見?[擴展功能 -> 國際化](76397)。 ## 多主題設置多主題后，視圖路徑會多一層多主題的目錄。如：具體的視圖路徑變為`view/default/home/index_index.html`，其中?`default`?為主題名稱。可以通過?`http.theme`?方法來設置當前的主題，設置主題一般是通過 middleware 來實現。關于 middleware 更多信息請見?[擴展功能 - Middleware](76391)。 ## 默認模版變量為了可以在模版里很方便的獲取一些通用的變量，框架自動向模版里注冊了?`http`,?`controller`,?`config`?等變量，這些變量可以在模版里直接使用。下面的代碼示例都是基于?`ejs`?模版引擎的，其他的模版引擎下需要根據相應的語法進行修改。 ### http 模版里可以直接使用?`http`?對象下的屬性和方法。 ### controller 模版里可以直接使用?`controller`?對象下的屬性和方法。 ~~~ export default class extends think.controller.base { indexAction(){ this.navType = "home"; } } ~~~ Action 里給當前控制器添加了屬性?`navType`，那么模版里就可以直接通過?`controller.navType`?來使用。 ~~~ <%if(controller.navType === "home")%> <li className="action">home</li> <%}else{%> <li>home</li> <%}%> ~~~ ### config 通過?`config`?對象可以在模版中直接對應的配置，如： ~~~ <%if(config.name === "text"){%> <%}%> ~~~ ### 國際化方法 _ 在模版中可以直接通過?`_`?方法獲取對應本地化的值，這些值在?`src/common/config/locales/[lang].js`?中定義。 ~~~ <%= _("title")%> ~~~ 更多國際化相關的信息請見?[這里](76397)。