artemplate include

include用于嵌入字模板

{{include 'template_name'}}

子模板 默认共享当前的数据 也可以自己指定数据

{{include 'template_name' template_data}}

demo1

html

<div id="content5"></div>

 

template

<script type="text/html" id="test6">
<ul>
    {{each content}}
    <li>{{$value}}</li>
    {{/each}}
</ul>
</script>
<script  id="test5" type="text/html">
    <div>
        <h3>test5:{{title}}</h3>
        <div>{{include 'test6' list}}</div>
    </div>
</script>

 

js

var data1 = {
        aa:"ewewew",
        title : 'HELLO WORLD',
        isAdmin : true,
        list :{
            content: ['新闻','军事','历史','政治']
        }

    };
    var html5=template('test5',data1);
    document.getElementById("content5").innerHTML=html5;

 

demo2

html

<div id="aa"></div>

template:

<script type='text/html' id='test3'>
    <ul>
        {{each list}}
        <li>
            {{$value}}
        </li>
        {{/each}}
    </ul>
</script>
<script type='text/html' id='test1'>
    <ul>
        {{each content}}
        <li>
            <div>{{$value.title}}</div>
            <div>{{include 'test3' $value}}</div>
        </li>
        {{/each}}
    </ul>
</script>

<script type='text/html' id='test2'>
    <h3>{{title}}</h3>
    <ul>
        {{each list}}
        <li>{{include 'test1' $value}}</li>
        {{/each}}
    </ul>

</script>

js

<script>

    var data = {
        title: "this is my first include demo",
        list: [
            {content: [
                {list: ['新闻', '军事', '历史', '政治'], title: 'aa-1-1'},
                {list: ['新闻', '军事', '历史', '政治'], title: 'aa-1-2'}
            ]},
            {content:[
                {list: ['新闻', '军事', '历史', '政治'], title: 'aa-2-1'},
                {list: ['新闻', '军事', '历史', '政治'], title: 'aa-1-1'}
            ]
            }]
    };
    var html = template('test2', data);
    document.getElementById('aa').innerHTML = html;
</script>

 

转载于:https://www.cnblogs.com/xiaofenguo/p/6672550.html