arttemplate.js簡潔寫法案例

時間 2019-11-29

標籤 arttemplate.js arttemplate 簡潔寫法案例欄目 JavaScript 简体版

原文原文鏈接

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

相關標籤/搜索