模板引擎介紹

什麼是模板引擎

模板引擎是為了使用戶界面與業務數據（內容）分離而產生的,它可以生成特定格式的文檔,用於網站的模板引擎就會生成一個標準的HTML文檔.其本質是利用正則表達式,替換模板當中預先定義好的標簽.

• 常用模板引擎
• ArtTemplate
• BaiduTemplate
• velocity.js
• Handlebars

ArtTemplate模板引擎介紹

原生語法

• 使用原生語法,帶入template-native.js文件
• 表達式 <% 與 %> 符號包裹起來的語句則為模板的邏輯表達式。
• 輸出表達式 對內容編碼輸出 <%=content%> 不編碼輸出 <%=#content%>
• 邏輯 支持使用js原生語法

• 模板包含表達式
  用於嵌入子模板<% include('template_name') %>
  子模板預設共用當前數據，亦可以指定數據<% include('template_name', news_list) %>

  <script id="test" type="text/html">
  <%if(admin){%>
  <%include('admin_content')%>
  <%for (var i=0;i<list.length;i++) {%>
      <div><%=i%>. <%=list[i].user%></div>
  <%}%>
  <%}%>
  </script>

簡潔語法

• 使用簡潔語法,引入template.js文件
• 表達式 {{ 與 }} 符號包裹起來的語句則為模板的邏輯表達式。
• 輸出表達式 對內容編碼輸出 {{=content}} 不編碼輸出 {{#content}}

• 條件表達式

  {{if admin}}
  <p>admin</p>
  {{else if code > 0}}
  <p>master</p>
  {{else}}
  <p>error!</p>
  {{/if}}

• 遍歷表達式

  {{each list as value index}}
  <li>{{index}} - {{value.user}}</li>
  {{/each}}
  //簡寫
  {{each list}}
  <li>{{$index}} - {{$value.user}}</li>
  {{/each}}

• 模板包含表達式
  用於嵌入子模板{{include 'template_name'}}
  子模板預設共用當前數據，亦可以指定數據{{include 'template_name' news_list}}

渲染數據到頁面

模板生成好的頁面元素template("id",data)