arttemplate.js简洁写法案例 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简介语法</title>
</head>
<body>
<div id="box"></div>
<!--**注意** 模版当中没有其他全局变量 -->
<!--
     <% for(var i = 0 ; i < model.length ; i ++){ %>
        <%=model[i].name%>今年<%=model[i].age%><br>
    <% }; %>
-->
<!--
{{ each model as value i }}
        {{value.name}}今年{{value.age}}<br>
    {{/each}}
-->
<script type="text/template" id="box_template">
    {{ each model}}
        {{$index}} {{$value.name}}今年{{$value.age}}<br>
    {{/each}}
</script>
<!--原生语法的js native-->
<script src="js/template.js"></script>
<script src="js/jquery.min.js"></script>
<script>
    /*1.准备数据*/
    var dataList = [
        {name:'xgg',age:'10'},
        {name:'xgg',age:'12'},
        {name:'xgg',age:'13'},
        {name:'xgg',age:'14'},
        {name:'xgg',age:'18'}
    ]
    /*2.转化数据成html*/
    var html = template('box_template',{model:dataList});
    /*3.渲染*/
    document.querySelector('#box').innerHTML = html;
</script>
</body>
</html>

 

posted @ 2016-10-05 15:41  萧诺  阅读(3312)  评论(0)    收藏  举报