art-template简单使用

Posted 2020-10-22 双面猫

 art-template是一款较通用的前端模板引擎。

简单的使用方法如下：

具备3个要素

1）模板

    <script type="text/template" id="tpl">
        <p>我是一头{{animal}}</p>
    </script>

2）引入插件

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

3）调用插件

var html = template(‘tpl‘, {animal:"老虎" });
console.log(html)；

------------------------------------------------------------------------------------------------------

关于在模板中填充数据注意点：

这个地方有一点需要注意：如果传入给template第二个参数的是一个没有次级对象的单层级对象,模板中只要包含属性名就好, 如

{animal："老虎"} => {{animal}}

{animals：{"cat":"老虎"， "dog":"狮子"}} => {{animals.cat}} | {{animals.dog}}

------------------------------------------------------------------------------------------------------

集中基础简单的应用：

•  循环

模板中的写法：

{{each target}}
    {{$index}} {{$value}}
{{/each}}

 传入template的数据的格式

{"target":["aaa","bbb","ccc"]}
或
{"target":{a:"aaa",v:"bbb",c:"ccc"}

•  条件

模板中的写法：

{{if age == "21"}}
   ....
{{else if age == "23"}}
    ....
{{/if}}

 传入template的数据的格式

{"age":"23"}

•  原文输入（即不将 < > / 等符号进行转码输出）

{{@ data }}

　　

 

 

 

 

 

详细信息可看art-template官网 http://aui.github.io/art-template/zh-cn/