js模板引擎-art-template常用

art-template

javascript 模板引擎

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

基础数据渲染
输出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==}}

        <h1>线上</h1>

        {{else if bok==}}

        <h2>隐藏</h2>

        {{else}}

        <h3>走这里</h3>

        {{/if}}

    </div>

</script>

<script>

    var data = {

        "bok":

    };

    var html = template('test',data);

    document.getElementById("app").innerHTML = html;

</script>

嵌套的写法

<script id="test" type="text/html">

    <div>

        {{if bok}}

            {{if list.length>=}}

                {{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==}}

            <ul>

                {{each person}}

                    <li>

                        编号：{{$index+}}--姓名：{{$value.name}}--年龄：{{$value.age}}

                    </li>

                {{/each}}

            </ul>

        {{/if}}

    </ul>

</div>

</script>

<script>

    var data = {

        c:,

        person:[

            {name:"jack",age:},

            {name:"tom",age:},

            {name:"jerry",age:},

            {name:"kid",age:},

            {name:"jade",age:}

        ]

    };

    var html = template("test",data);

    document.getElementById("content").innerHTML = html;

</script>

调用自定义方法

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

<script id="test" type="text/html">

<div>

    {{if c==}}

        <ul>

            {{each person}}

                <li>姓名：{{$value.name}}--性别：{{show($value.sex)}}</li>

            {{/each}}

        </ul>

    {{/if}}

</div>

</script>

<script>

    var data = {

        c:,

        person:[

            {name:"jack",age:,sex:},

            {name:"tom",age:,sex:},

            {name:"jerry",age:,sex:},

            {name:"kid",age:,sex:},

            {name:"jade",age:,sex:}

        ]

    };

    //自定义函数

    template.helper("show",function(sex){

        console.log(sex);//同样可以打印日志到控制台

        if(sex==){

            return "男"

        }else if(sex==){

            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:},

            {name:"tom",age:},

            {name:"jerry",age:},

            {name:"kid",age:},

            {name:"jade",age:}

        ],

        a:{

            list:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

        }

    };

    var html = template("test",data);

    document.getElementById("app").innerHTML=html;

</script>

</body>

原生语法

使用原生语法，需要导入template-native.js文件。

在HTML中定义模板，注意模板的位置，不要放到被渲染区域，防止模板丢失。

<script id="main_panel_big_sale_template" type="text/html">

    <% for (var i = ; i < products.length; i ++) { %>

        <% var product =products[i]; %>

        <% if (i < ) { %>

            <li>

                <img src="<%=getImageUrl(product.pictographicIconList[0].image.url)%>" data-imgname="<%=product.pictographicIconList[0].image.url%>">

                <div class="flash-time-box">

                    <span>--</span>

                </div>

                <strong class="marque"><%=product.name%></strong>

                <strong class="libelle"><%=product.description%></strong>

                <div class="no-picto">

                    <span class="prod-tip">

                        <img src="img/grey.png" data-original="img/icon.png">

                    </span>

                    <span class="italic black">

                        <span class="cny-curr">¥&nbsp;<%=formatPrice(product.promoPrice,'integer')%></span><span class="decimal"><%=formatPrice(product.promoPrice,'decimal')%></span>

                    </span>

                </div>

            </li>

        <% } %>

    <% } %>

</script>

template(id, data)

渲染数据到页面

$('#main_panel').html(template('main_panel_big_sale_template', data));

简洁语法

使用简洁语法，导入template.js文件。

<script id="main_panel_big_sale_template" type="text/html">

   {{each products as product i}}

   {{if i < }}

       <li>

           <img src="{{product.pictographicIconList[0].image.url | getImageUrl}}" data-imgname="{{product.pictographicIconList[0].image.url}}">

           <div class="flash-time-box">

               <span>--</span>

           </div>

           <strong class="marque">{{product.name}}</strong>

           <strong class="libelle">{{product.description}}</strong>

           <div class="no-picto">

                <span class="prod-tip">

                    <img src="img/grey.png" data-original="img/icon.png">

                </span>

                <span class="italic black">

                    <span class="cny-curr">¥&nbsp;{{product.price.value | formatPrice: 'integer'}}</span><span class="decimal">{{product.price.value | formatPrice: 'decimal'}}</span>

                </span>

           </div>

       </li>

   {{/if}}

   {{/each}}

</script>

渲染数据到页面，和原生语法一样

$('#main_panel').html(template('main_panel_big_sale_template', data));

调用外部函数

template.helper

上面的例子中，都调用了formatPrice函数，要调用此函数需要通过helper方法注册：

template.helper('formatPrice', function(price, type) {

    if(price){

        var arrayPrice = price.toString().split(".");

        if(type == 'integer') {

            return arrayPrice[]?arrayPrice[]:"";

        }else if (type =='decimal') {

            return arrayPrice[]?arrayPrice[].length == ?"."+arrayPrice[]+"":"."+arrayPrice[]:".00";

        }

    }else{

        if(type == 'integer') {

            return "";

        }else if (type =='decimal') {

            return ".00";

        }

    }

});

原生语法与简洁语法比较

语法类型	调用外部函数
原生	<%=formatPrice(product.promoPrice,'integer')%>
简洁	{{product.price.value \| formatPrice: 'integer'}}

简洁语法的传参有点奇怪，原生语法就很好理解，如果要传递三个参数，简洁语法该怎么写呢？

简洁语法的循环如果要做更多逻辑，也实现不了。

推荐使用原生语法

template.compile

模板可以直接写在JS中，再编译渲染。

var source = '<ul>'

+    '<% for (var i = 0; i < list.length; i ++) { %>'

+        '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'

+    '<% } %>'

+ '</ul>';

var render = template.compile(source);

var html = render({list: ['摄影', '电影', '民谣', '旅行', '吉他']});

document.getElementById('content').innerHTML = html;

这种方式的的缺点是，模板通过字符串拼接，不好维护，适合简单模板。