您的位置：首页 > 其它

artTemplate用法 以及子模板

2019-05-30 18:34 120 查看

条件

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

循环

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

变量

<div id="test"></div>
<script type="text/html" id="testTpl">
{{each list}}
{{set temp = $value * 10}}
用上变量后值是：{{temp}}<br>

{{/each}}
</script>
<script src="http://localhost:8888/wcp_web_war_exploded/text/javascript/template.js"></script>
<script>

var data = {
list: [10, 20, 30]
};

test.innerHTML = template('testTpl', data);
</script>

artTemplate子模板与递归

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>

<body>
<div id="test"></div>
<script type="text/html" id="parentTpl">
<ul>
{{each list}}
<li>
<h5>{{$value.title}}</h5>
{{include 'childTpl' $value}}
</li>
{{/each}}
</ul>
</script>
<script type="text/html" id="childTpl">
<ul>
{{each children}}
<li>
<h5>{{$value.title}}</h5>
{{include 'childTpl' $value}}
</li>
{{/each}}
</ul>
</script>
<script src="js/template.js"></script>
<script>
var data = {
list: [{
title: '广东省',
children: [{
title: '广州市',
children: [{
title: '越秀区',
}]

},
{
title: '深圳市',
children: [{
title: '福田区',
children: [{
title: '梅林街道',
children: [
{ title: '上梅林社区' },
{ title: '下梅林社区' },
{ title: '新兴社区' }
]
},
{ title: '香蜜湖街道' }
]
},
{ title: '南山区' }
]
},
{
title: '东莞市'
}
]
},
{
title: '湖南省',
children: [
{
title: '长沙市',
children: [{
title: '岳麓区',
}]

},
{
title: '株洲市'
},
{
title: '湘潭市'
}
]
}
]
};
var html = template('parentTpl', data);
var el = document.getElementById('test');
el.innerHTML = html;
</script>
</body>

</html>

过滤器

讲真这个过滤器的语法设计得有点反人类，理解起来挺费劲的

<div id="test"></div>
<script type="text/html" id="testTpl">
{{each list}}
{{$value | double | sum 100 200}}  <!--这句话的意思是$value作为double的参数，然后把double返回的结果作为sum的第一个参数，100为sum的第二个参数，200为sum的第三个参数 -->
{{/each}}

{{10 | double}} <!--这句话的意思是10为double的参数 -->

</script>
<script src="js/template.js"></script>
<script>
template.defaults.imports.sum = function(a, b, c) {

return a + b + c;
};

template.defaults.imports.double = function(n) {

return n * 2;
};

var data = {
list: [10, 20, 30]
};

test.innerHTML = template('testTpl', data);
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航