art-template常用总结

来源：互联网发布：腾讯云香港 cn2 知乎编辑：程序博客网时间：2024/06/11 10:11

高性能JavaScript模板引擎原理解析：http://cdc.tencent.com/2012/06/15/%E9%AB%98%E6%80%A7%E8%83%BDjavascript%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/

javascript 模板引擎，官网：https://github.com/aui/art-template

分为原生语法和简洁语法，本文主要是讲简洁语法

基础数据渲染
输出HTML
流程控制
遍历
调用自定义函数方法
子模板引入

基础数据渲染

一、引入art-template.js文件

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

二、编写HTML模板

<script id="test" type="text/html">    <h1>{{title}}</h1></script>

三、向模板插入数据，并输出到页面

var data = {    title:"hello world"};var html = template("test",data);document.getElementById('content').innerHTML = html;

输出HTML

<script id="test" type="text/html">    <h1>{{title}}</h1></script>

//注意：{{title}}这是对内容编码输出，应该写成{{#title}}这是对内容不编码输出

<script id="test" type="text/html">    <h1>{{#title}}</h1></script>var data = {    title:"<p>hello world</p>"};var html = template("test",data);document.getElementById('content').innerHTML = html;

流程控制语句（if else）

{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}
art-template里面的流程控制就相对其他模板来说强大很多了，直接看例子吧

<script id="test" type="text/html">    <div>        {{if bok==22}}        <h1>线上</h1>        {{else if bok==33}}        <h2>隐藏</h2>        {{else}}        <h3>走这里</h3>        {{/if}}    </div></script><script>    var data = {        "bok":22    };    var html = template('test',data);    document.getElementById("app").innerHTML = html;</script>

嵌套的写法

<script id="test" type="text/html">    <div>        {{if bok}}            {{if list.length>=0}}                {{each list}}                    <p>{{$index}}:{{$value}}</p>                {{/each}}            {{else}}                <p>没有数据</p>            {{/if}}        {{/if}}    </div></script><script>    var data = {        "bok":true,        list:["a","b","c"]    };    var html = template('test',data);    document.getElementById("app").innerHTML = html;</script>

循环遍历语句

{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}

<script id="test" type="text/html"><div>    <ul>        {{if c==100}}            <ul>                {{each person}}                    <li>                        编号：{{$index+1}}--姓名：{{$value.name}}--年龄：{{$value.age}}                    </li>                {{/each}}            </ul>        {{/if}}    </ul></div></script><script>    var data = {        c:100,        person:[            {name:"jack",age:18},            {name:"tom",age:19},            {name:"jerry",age:20},            {name:"kid",age:21},            {name:"jade",age:22}        ]    };    var html = template("test",data);    document.getElementById("content").innerHTML = html;</script>

调用自定义方法

通过template.helper(name,fnCallBack)注册方法
可以直接在{{}}中调用

<script id="test" type="text/html"><div>    {{if c==100}}        <ul>            {{each person}}                <li>姓名：{{$value.name}}--性别：{{show($value.sex)}}</li>            {{/each}}        </ul>    {{/if}}</div></script><script>    var data = {        c:100,        person:[            {name:"jack",age:18,sex:1},            {name:"tom",age:19,sex:0},            {name:"jerry",age:20,sex:0},            {name:"kid",age:21,sex:1},            {name:"jade",age:22,sex:0}        ]    };    //自定义函数    template.helper("show",function(sex){        console.log(sex);//同样可以打印日志到控制台        if(sex==0){            return "男"        }else if(sex==1){            return "女"        }    });    var html = template("test",data);    document.getElementById("app").innerHTML = html;</script>

调用子模板

{{include 'main'}} 引入子模板，数据默认为共享
{{include 'main' a}} a为制定数据，但是同样必须是父级数据，可以看看下面的例子，如果不注入的a的话，引入的子模板是接受不到数据的

<body><div id="app"></div><script src="template-debug.js"></script><script id="main" type="text/html">    <ul>       {{each list}}            <li>{{$value}}</li>        {{/each}}    </ul></script><script id="test" type="text/html">    <div>        <ul>            {{each person}}                <li>{{$value.name}}</li>            {{/each}}        </ul>        {{include 'main' a}}    </div></script><script>    var data = {        person:[            {name:"jack",age:18},            {name:"tom",age:19},            {name:"jerry",age:20},            {name:"kid",age:21},            {name:"jade",age:22}        ],        a:{            list:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']        }    };    var html = template("test",data);    document.getElementById("app").innerHTML=html;</script></body>

转载地址：http://www.cnblogs.com/shiyou00/p/6841801.html

阅读全文

0 0