art-template常用语法

2019独角兽企业重金招聘Python工程师标准>>>

1.基础数据渲染

• 直接输出就用{{}}
• 编译输出前面加上#(比如内容带有标签)

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

2.判断语句

{{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
    };
    $('#content').html(template("test",data))
</script>

3.嵌套

• 嵌套直接缩进后在内部书写

{{if bok}}
	{{if list.length>=0}}
		{{each list}}
		<p>{{$index}}:{{$value}}</p>
		{{/each}}
	{{else}}
	<p>没有数据</p>
	{{/if}}
{{/if}}

4.循环

• each后面跟字段名称
• $index为索引值
• $value为值

{{each name}}
<li>
	<p>索引值为：{{$index}}</p>
	<p>value值为：{{$value}}</p>
</li>
{{/each}}

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 "女"
        }
    });
	$('#app').html(template("test",data))
</script>

6.模板引入

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

# main模板
<script id="main" type="text/html">
    <ul>
       {{each list}}
            <li>{{$value}}</li>
        {{/each}}
    </ul>
</script>
# test模板
<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:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
        }
    };
	$('#app').html(template("test",data))
</script>

转载于:https://my.oschina.net/chinahufei/blog/2209495