artTemplate的用法

条件

{{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子模板与递归


<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examplestitle>
    <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>

artTemplate的用法_第1张图片

过滤器

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

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

你可能感兴趣的:(artTemplate,递归)