模板引擎介绍

什么是模板引擎

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