ThinkJS 視圖

視圖

視圖即模版，默認的根目錄為 view/。

視圖文件

視圖文件默認的規(guī)則為 模塊/控制器_操作.html。

假如 URL home/article/detail 解析后的模塊是 home，控制器是 article，操作是 detail，那么對應(yīng)的視圖文件為 home/article_detail.html。

視圖配置

視圖默認配置如下，可以在配置文件 src/common/config/view.js 中修改：

export default {
  content_type: "text/html", //輸出模版時發(fā)送的 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，可以根據(jù)需要修改為其他的模版引擎。

ejs

定界符

ejs 默認的定界符是 <% 和 %>。如果想修改定界符，可以通過配置里的 options 來修改，如：

export default {
  options: {
    delimiter: "&" //將定界符修改為 <& 和 &>
  }
}

變量輸出

• 轉(zhuǎn)義輸出 <%= data.name%>
• 不轉(zhuǎn)義輸出 <%- data.name%>
• 注釋 <%# data.name%>

條件判斷

<%if(data.name === "1"){%>
    <p>...</p>
<%}else if(data.name === "2"){%>
    <p>...</p>
<%}else{%>
    <p>...</p>
<%}%>

循環(huán)

<%list.forEach(function(item)){%>
    <li><%=item.name%></li>
<%}%>

引用文件

ejs 不支持模版繼承。但可以將公用的模版獨立成一個文件，然后通過 include 來引入。

<%include inc/header.html%>

注： ejs 模版使用的變量需要在控制器中賦值，否則會報錯。

更多 ejs 使用文檔請見 這里。

nunjucks

nunjucks 是一款類似于 jinja2 的模版引擎，功能異常強大，復(fù)雜項目建議使用該模版引擎。

定界符

塊級定界符為 {% 和 %}，變量定界符為 {{ 和 }}，注釋定界符為 <# 和 #>。如：

{{ username }}  

{% block header %} 
This is the default content
{% endblock %}

變量輸出

可以通過 {{ username }} 來輸出變量，默認輸出的變量會自動轉(zhuǎn)義，如果不想被轉(zhuǎn)義，可以通過 {{ 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 %}

循環(huán)

<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>

具體使用文檔請見 這里。

jade

jade 模版使用方式請見 這里。

swig

swig 模版使用方式請見 這里。

擴展模版引擎

模版引擎使用 Adapter 實現(xiàn)。如果項目里需要使用其他模版引擎，可以通過 Adapter 進行擴展，具體請見 這里。

變量賦值

控制器中可以通過 assign 方法進行變量賦值。

賦值單個變量

export default class extends think.controlle.base {
  indexAction(){
    this.assign("title", "ThinkJS 官網(wǎng)");
  }
}

賦值多個變量

export default class extends think.controlle.base {
  indexAction(){
    this.assign({
      title: "ThinkJS 官網(wǎng)",
      author: "thinkjs"
    });
  }
}

獲取賦值

變量賦值后也可以通過 assign 來獲取賦過的值。如：

export default class extends think.controlle.base {
  indexAction(){
    this.assign("title", "ThinkJS 官網(wǎng)");
    let title = this.assign("title");
  }
}

模版渲染

可以通過 display 方法進行模版渲染。如果不傳具體的模版文件路徑，會自動查找。如：

export default class extends think.controller.base {
  indexAction(){
    this.display();// render home/index_index.html
  }
}

也可以指定具體的模版文件進行渲染，關(guān)于 display 方法的詳細使用請見 這里。

獲取渲染后的內(nèi)容

如果有時候不想支持輸出模版，而是想獲取渲染后的模版內(nèi)容，那么可以通過 fetch 方法來獲取。

ES6 方式

export default class extends think.controller.base {
  * indexAction(){
    let content = yield this.fetch();
    ...
  }
}

動態(tài)創(chuàng)建類的方式

module.exports = think.controller({
  indexAction: function(){
    this.fetch().then(function(content){
      ...
    })
  }
})

關(guān)于 fetch 方法的詳細使用方式請見 這里。

國際化

啟動國際化后，視圖路徑會多一層國際化的目錄。如：具體的視圖路徑變?yōu)?nbsp;view/zh-CN/home/index_index.html，其中 zh-CN 為語言名。

關(guān)于如果使用國際化請見 擴展功能 -> 國際化。

多主題

設(shè)置多主題后，視圖路徑會多一層多主題的目錄。如：具體的視圖路徑變?yōu)?code>view/default/home/index_index.html，其中 default 為主題名稱。

可以通過 http.theme 方法來設(shè)置當(dāng)前的主題，設(shè)置主題一般是通過 middleware 來實現(xiàn)。

關(guān)于 middleware 更多信息請見 擴展功能 - Middleware。

默認模版變量

為了可以在模版里很方便的獲取一些通用的變量，框架自動向模版里注冊了 http, controller, config 等變量，這些變量可以在模版里直接使用。

下面的代碼示例都是基于 ejs 模版引擎的，其他的模版引擎下需要根據(jù)相應(yīng)的語法進行修改。

http

模版里可以直接使用 http 對象下的屬性和方法。

controller

模版里可以直接使用 controller 對象下的屬性和方法。

export default class extends think.controller.base {
  indexAction(){
    this.navType = "home";
  }
}

Action 里給當(dāng)前控制器添加了屬性 navType，那么模版里就可以直接通過 controller.navType 來使用。

<%if(controller.navType === "home")%>
  <li className="action">home</li>
<%}else{%>
  <li>home</li>
<%}%>

config

通過 config 對象可以在模版中直接對應(yīng)的配置，如：

<%if(config.name === "text"){%>

<%}%>

國際化方法 _

在模版中可以直接通過 _ 方法獲取對應(yīng)本地化的值，這些值在 src/common/config/locales/[lang].js 中定義。

<%= _("title")%>

更多國際化相關(guān)的信息請見 這里。