art-template模板引擎

本文介绍了如何使用art-template进行基础数据渲染,包括引入模板、HTML模板编写、数据插入、输出控制(如条件语句和循环),以及自定义方法和子模板的使用。了解这些核心概念有助于高效地构建和管理前端动态内容。
摘要由CSDN通过智能技术生成

一、基础数据渲染,template(id, data)

	1、引入art-template.js文件
         <script src="template-debug.js"></script>
    2、编写HTML模板
			<script id="test" type="text/html">
			    <h1>{{title}}</h1>
			</script>
    3、向模板插入数据,并输出到页面
				var data = {
				    title:"hello world"
				};
				var html = template("test",data);
				document.getElementById('content').innerHTML = html;

二、语法

1. 输出HTML
1) 对内容编码输出: {{content}}
2)不编码输出: {{#content}}
编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。

         <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;

2. 流程控制语句(if else)
{{if value}}

{{else if value}}

{{else}}

{{/if}}

  <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>

3. 嵌套的写法

   <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>

4. 循环遍历语句
{{each name}}
索引:{{KaTeX parse error: Expected 'EOF', got '}' at position 6: 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>

5. 调用自定义方法
通过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>

6. 调用子模板
{{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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值