模板引擎引见

模板引擎介绍

什么是模板引擎

模板引擎是为了使用户界面与业务数据（内容）分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的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)