artTemplate 腾讯的高性能模板引擎

artTemplate-3.0

 

快速上手

 

使用一个type="text/html"的script标签存放模板:

 

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} :{{value}}</li>
    {{/each}}
</ul>
</script>

 

渲染模板

 

var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

var source = '<ul>'
+    '{{each list as value i}}'
+        '<li>索引 {{i + 1}} :{{value}}</li>'
+    '{{/each}}'
+ '</ul>';
 
var render = template.compile(source);
var html = render({
    list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
 
document.getElementById('content').innerHTML = html;

 

演示

模板语法

 

有两个版本的模板语法可以选择。

简洁语法

 

推荐使用,语法简单实用,利于读写。

 

{{if admin}}
    {{include 'admin_content'}}
 
    {{each list}}
        <div>{{$index}}. {{$value.user}}</div>
    {{/each}}
{{/if}}

 

查看语法与演示

原生语法

 

<%if (admin){%>
    <%include('admin_content')%>
 
    <%for (var i=0;i<list.length;i++) {%>
        <div><%=i%>. <%=list[i].user%></div>
    <%}%>
<%}%>

使用template.helper(name, callback)注册公用辅助方法,例如一个基本的 UBB 替换方法:

 

template.helper('$ubb2html', function (content) {
    // 处理字符串...
    return content;
});

 

模板中使用的方式:

 

<% $ubb2html(content) %>

富文本转义,前面加"#"

实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="test_tp_ct"></div>
 
        <script type="text/template" id="test_tp">
            {{each obj as v i}}
            {{if v>obj[0]}}
            <div>{{v+'-'+i+'-'+$format(v)}}</div>
            {{/if}}
            {{/each}}
        </script>
 
        <script type="text/javascript" src="js/template.js" ></script>
        <script>
            template.helper('$format', function (content) {
                return content+'x';
            });
            var html = template('test_tp',{obj:[1,2,3,4]});
            document.getElementById("test_tp_ct").innerHTML = html ;
        </script>
    </body>
</html>


你可能感兴趣的:(artTemplate)