1. Basic data rendering

• Use {}} for direct output
• Compile the output with a ා (for example, the content is labeled)

<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. Judgment statement

{{if value}} ... {{else if value}} ... {{else}} ... {{/if}}

<script id="test" type="text/html">
    <div>
        {{if bok==22}}
        <h1>On-line</h1>
        {{else if bok==33}}
        <h2>hide</h2>
        {{else}}
        <h3>Walk here</h3>
        {{/if}}
    </div>
</script>
<script>
    var data = {
        "bok":22
    };
    $('#content').html(template("test",data))
</script>

3. nesting

• Write inside after nested direct indent

{{if bok}}
	{{if list.length>=0}}
		{{each list}}
		<p>{{$index}}:{{$value}}</p>
		{{/each}}
	{{else}}
	<p>no data</p>
	{{/if}}
{{/if}}

4. cycle

• each followed by field name
• $index is the index value
• $value is the value.

{{each name}}
<li>
	<p>The index value is:{{$index}}</p>
	<p>value The value is:{{$value}}</p>
</li>
{{/each}}

5. Call custom method

• Similar to filter
• Through the template.helper(name,fnCallBack) registration method, you can call directly in the

<script id="test" type="text/html">
	<div>
		{{if c==100}}
			<ul>
				{{each person}}
					<li>Full name:{{$value.name}}--Gender:{{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}
        ]
    };
    //Custom function
    template.helper("show",function(sex){
        console.log(sex);//You can also print logs to the console
        if(sex==0){
            return "male"
        }else if(sex==1){
            return "female"
        }
    });
	$('#app').html(template("test",data))
</script>

6. Template introduction

• {{include 'main'}} introduces a sub template. The data is shared by default
• {{include 'main' a}} a is the specified data, but it must also be the parent data. You can see the following example. If you do not inject a, the introduced sub template will not accept the data

# main template
<script id="main" type="text/html">
    <ul>
       {{each list}}
            <li>{{$value}}</li>
        {{/each}}
    </ul>
</script>
# test template
<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:['literature', 'Blog', 'Photography', 'Film', 'Ballad', 'travel', 'Guitar']
        }
    };
	$('#app').html(template("test",data))
</script>