码迷,mamicode.com
首页 > Web开发 > 详细

arttemplate.js简洁写法案例

时间:2016-10-05 17:11:42      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

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

 

arttemplate.js简洁写法案例

标签:

原文地址:http://www.cnblogs.com/lsy0403/p/5932326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!