artTemplate的一些复杂用法

中文api：https://aui.github.io/art-template/zh-cn/docs/api.html

1.单对象的，及里层数组的遍历：

//html模板代码

  <ul>
        <script type="text/html" id="test">
            <li>
                <p>{{time}}</p>
                {{each arr as v i }}
                <p>{{v.des}}</p>
                {{/each}}
                <p>{{title}}</p>
            </li>

         </script>
   </ul>







//js代码

var data = {
    time:'2018-07-07 15:30:00',
    title: '内容1',
    arr: [
        { 'dataTime': '2018-07-07 15:30:00', 'des': "小标题1" },
        { 'dataTime': '2018-07-08 16:30:00', 'des': "小标题2" },
        { 'dataTime': '2018-07-09 17:30:00', 'des': "小标题3" },
        { 'dataTime': '2018-07-10 18:30:00', 'des': "小标题4" }
    ]
}


$("ul").html(template('test',data))

效果如下;

2.template.helper('fn',function(a){

})

fn:函数名；a:需要处理的参数；

自定义一个函数处理

例：

//html模板部分

<ul>
            <script type="text/html" id="test">
                <li>
                <p>{{handleTime time}}</p>
                {{each arr as v i }}
                <p>{{v.des}} vs  {{handleTime v.dataTime}}</p>
                <p>{{handleSex v.type v.num}}</p>
                {{/each}}
                <p>{{title}}</p>
            </li>

            </script>
</ul>





//js部分

var data = {
    time: '2018-07-07 15:30:00',
    title: '内容1',
    arr: [
        { 'dataTime': '2018-07-07 15:30:00', 'des': "小标题1", 'type': 1 , 'num': 6},
        { 'dataTime': '2018-07-08 16:30:00', 'des': "小标题2", 'type': 2 , 'num': 7},
        { 'dataTime': '2018-07-09 17:30:00', 'des': "小标题3", 'type': 2 , 'num': 8},
        { 'dataTime': '2018-07-10 18:30:00', 'des': "小标题4", 'type': 1 , 'num': 4}
    ]
};



//这里的handleTime是函数名，后面是传入的参数：注意就是需要返回值
:上面的模板填空的时候，参数和函数名间要有空格

template.helper('handleTime', function(a) {
    return a.substring(5, 10)
})


//这里的handleSex是函数名，传入两个参数：注意就是需要返回值
template.helper('handleSex', function(a,b) {
    if(a==1){
         return b-a
    }else{
        return b+a 
    }
   
})


//这里注意：template.helper（）必须写在渲染的前面

$("ul").html(template('test', data))

3.template中双重遍历的情况

//html代码

    <div id="main">
        <script type="text/html" id="temp2">
            {{each list as v i}}
            {{if i==0}}
            <div>
                <h2>{{v.title}}</h2>
                <div>
                    <ul>
                        {{each v.a.contents as value index}}
                        <li>{{value.content}}</li>
                       {{/each}}

                    </ul>
                </div>
            </div>
            {{else}}
            <div>
                <h2>{{v.title}}</h2>
                <div>
                    <ul>
                        {{each v.a.contents as value index}}
                         <li>{{value.content}}</li>
                       {{/each}}

                    </ul>
                </div>
            </div>
            {{/if}}
            {{/each}}
         </script>
    </div>



//js代码

 var data = {
        list: [{
                title: "这是一个测试标题1",
                a: {
                    contents: [
                        { "content": "这是一段内容1" },
                        { "content": "这是一段内容1" },
                        { "content": "这是一段内容1" }
                    ]
                }
            },
            {
                title: "这是一个测试标题2",
                a: {
                    contents: [
                        { "content": "这是一段内容2" },
                        { "content": "这是一段内容2" },
                        { "content": "这是一段内容2" }
                    ]
                }
            }
        ]
    };

    $("#main").html(template('temp2',data));

4.template中include的用法：

同时上面的这种html也可以用include来进行改写，写法更清晰写法如下：

 //用include改写的html结构  

 <div id="main">  
        <script type="text/html" id="temp1">
            {{each contents as value index}}
                <li>{{value.content}}</li>
            {{/each}}
          
        </script>

        <script type="text/html" id="temp2">
            {{each list as v i}}
        <div>
            <h2>{{v.title}}</h2>
            <div>
                <ul>
                   {{include 'temp2' v.a}}
                </ul>
            </div>
        </div>
        {{/each}}
        </script>
    </div>

效果如下：

下面的include的用法

//index.html


    <div class="stage-panel" id="game_type_tt" style="">
        <div class="stage-knockout-match" id="gametype_18">
            <script type="text/html" id="temp1">
                <ul class="stage-vs-list quarter-knockout">
                {{include 'temp2' list[1][0]}}
            </ul>
            <ul class="stage-vs-list quarter-final">
                  {{include 'temp2' list[1][1]}}
            </ul>
          
            <ul class="stage-result-list final">
                 {{include 'temp3' list['fir']}}
              
            </ul>

              </script>
        </div>
    </div>
    <script type="text/html" id="temp2">
        <li>
        <div class="team-vs">
            <a href="" target="_blank" class="grid up win">
            <i class="left"></i><b class="name">
       
            11</b><span class="right">3</span>
           </a>
            <a href="" target="_blank" class="grid down">
                <i class="left"></i><b class="name">
           
                22</b><span class="right">2</span>
            </a>
            <p class="time">{{MatchDate}}</p>

               
            </p>
        </div>
        <div class="team-line"></div>
 </li>
</script>
    <script type="text/html" id="temp3">
        <li>
            <div class="txt-1">{{TeamName}}</div>
            <div class="txt-2">{{TeamId}}</div>
         </li>
</script>




//js
var data = {
    1: [
        { MatchDate: "2018-07-07 15:30:00", name: "内容1" },
        { MatchDate: "2018-07-08 18:30:00", name: "内容2" }
    ],
    2: [
        { MatchDate: "2018-07-09 15:30:00", name: "内容3" }
    ],
    fir: { TeamId: "33", TeamName: "A队" },
    sec: { TeamId: "44", TeamName: "B队" },
    trd: { TeamId: "55", TeamName: "C队" }
}

console.log(data)
$("#gametype_18").html(template('temp1', { list: data }))

效果如下：

将数据1中的0填充至第一块；将数据1中的1填充至第二块；将数据fir中的0填充至第三块

 

这时候如果是双层数组对象的话，根据实际情况，include有些需要定义三个模板:

 

<!-- 最里层的模板 -->
<script type="text/html" id="lpljhs_template3">

    <div>
     <p>{{name}}</p>
     <p>{{MatchDate}}</p>
    </div>
</script>

这里用第二层模板的意义就是在 最外层模板的include传值 的时候，我们拿不到value，进行不了each遍历，所以这里加一层过渡，直接each就可以each的时候不用传值。 然后include的时候 传$value

<!-- 第二层的模板 -->
<script type="text/html" id="lpljhs_template2">
        {{each}}
        {{include 'lpljhs_template3' $value}}
        {{/each}}
</script>


<!--最外层模板  -->
<script type="text/html" id="lpljhs_template1">
    <div class="event-type-1" id="lpljhs_container">
         <div class="list-col">
            {{include 'lpljhs_template2' list[1] }}
         </div>
    </div>
</script>

 

include还可以直接引入一个html页面

例如:

以上写的include的代码放在index.html中，如果后期这一段代码在多个活动中重复使用，可以拷贝过去，或者直接引入这个页面

新建一个 test.html

//html

<div id="box_test">

<!-- 这里放入index.html里面渲染好的内容 -->
</div>



//js

$.ajax({
dataType: 'html',
success:function(e){
    
    $("#box_test").html(e)
}

})

5.template中compile和render的用法：

//html

 <div id="box">
    </div>



//js

var data = [
        { MatchDate: "2018-07-07 15:30:00", name: "内容1" },
        { MatchDate: "2018-07-08 18:30:00", name: "内容2" },
        { MatchDate: "2018-07-09 15:30:00", name: "内容3" }
]

var source = '<ul>' +
         '{{each list as value i}}' +
         '<li>索引 {{i + 1}} ：{{value.MatchDate}}</li>' +
         '{{/each}}' +
         '</ul>';
var render = template.compile(source)
$("#box").html(render({list:data}))