art-template简使用

art-template 是一个简约、超快的模板引擎。

官网

art-template官网

安装

浏览器端使用：下载art-template

使用

 <script src="./art-template.js"></script>

输出

例子

<div id="content1"></div>
<script id="template1" type="text/html">
    <h1>{{title}}</h1>
</script>
<!-- 渲染模板 -->
<script type="text/javascript">
    var data1 = { // 准备模板中涉及的数据
        title: '标签'      
    };
    var html = template('template1', data1); // 调用template()方法将模板与数据结合进行渲染
    document.getElementById('content1').innerHTML = html; // 将渲染结果写入div
</script>

标准语法

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

原始语法

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

原始语法请参考官网文档

原文输出

<div id="content2"></div>
 <script id="template2" type="text/html">
    <p>{{content}}</p>//<span style="color:#F00">hello world!</span>
    <p>{{#content}}</p>//hello world!(颜色为红色)
    <p>{{@ content}}</p>//hello world!(颜色为红色)

</script>
<!-- 渲染模板 -->
<script type="text/javascript">
    var data2 = { // 准备模板中涉及的数据
        content: '<span style="color:#F00">hello world!</span>'
    };
    var html = template('template2', data2); // 调用template()方法将模板与数据结合进行渲染
    document.getElementById('content2').innerHTML = html; // 将渲染结果写入div
</script>

原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。

条件输出

<div id="content3"></div>
<script id="template3" type="text/html">
    {{if admin}}
    <p>admin</p>
    {{else if code > 0}}
    <p>master</p>
    {{else}}
    <p>error!</p>
    {{/if}}

</script>
<!-- 渲染模板 -->
<script type="text/javascript">
    var data3 = { // 准备模板中涉及的数据
        admin: false
    };

    var html = template('template3', data3); // 调用template()方法将模板与数据结合进行渲染
    document.getElementById('content3').innerHTML = html; // 将渲染结果写入div
</script>

遍历输出

<div id="content5"></div>
<script id="template5" type="text/html">
   <p>{{each list}} {{$index}} {{$value}} {{/each}}</p>

</script>
<!-- 渲染模板 -->
<script type="text/javascript">
   var data5 = { // 准备模板中涉及的数据
       list:['文艺范','不文艺范','嘻哈'] 
   };

   var html = template('template5', data5); // 调用template()方法将模板与数据结合进行渲染
   document.getElementById('content5').innerHTML = html; // 将渲染结果写入div
</script>

$value 与 $index 可以自定义：{{each target val key}}。

引入子模板

<div id="content3"></div>
<div id="content4"></div>
<script id="template3" type="text/html">
   {{if admin}}
    <p>admin</p>
    {{else if code > 0}}
    <p>master</p>
    {{else}}
    <p>error!</p>
    {{/if}}

</script>
<!-- 渲染模板 -->
<script type="text/javascript">
    var data3 = { // 准备模板中涉及的数据
        admin: false
    };

    var html = template('template3', data3); // 调用template()方法将模板与数据结合进行渲染
    document.getElementById('content3').innerHTML = html; // 将渲染结果写入div
</script>
<!-- 引入子模板 -->
<script id="template4" type="text/html">
     <p>{{content}}</p>
     {{include 'template3'}}

 </script>
 <!-- 渲染模板 -->
 <script type="text/javascript">
     var data4 = { // 准备模板中涉及的数据
         content: '引入子模板',
         admin: false
     };

     var html = template('template4', data4); // 调用template()方法将模板与数据结合进行渲染
     document.getElementById('content4').innerHTML = html; // 将渲染结果写入div
 </script>

{{include './header.art'}} 子模板共享当前数据
{{include './header.art' data}} 子模板指定新数据

官网还有一些别的方法，但是我觉得实际项目开发中这些是够了的。