使用JSTmplate向頁面渲染數據(使用方法示例)

使用JSTmplate向頁面渲染數據

1.引入模板

2.定義JSTmplate模板

3.將數據賦值給模板

4.把賦值後的模板中的值放到相應位置

 

示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--1.引入模板-->
    <script src="js/template.js"></script>
</head>
<body>
    <div id="content">

    </div>
<!--2.定義js模板-->
<script id="myTpl" type="text/html">
    <!--直接賦值-->
    <h1>{{title}}</h1>

    <!--判斷-->
    {{if isAdmin}}
    <p>顯示p</p>
    {{/if}}

    <!--遍歷-->
    {{each list as value}}
    <li>{{value}}</li>
    {{/each}}
</script>

<script>
    var data = {
      title:'射手',
       isAdmin:true,
       score:61,
       list:['魯班','孫尚香','馬可波羅','公孫離','後裔','伽羅']
    };

    /*3.將數據賦值給模板*/
    var html = template('myTpl',data);
    /*4.把賦值後的模板中的值放到相應的位置*/
    document.getElementById("content").innerHTML=html;
</script>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章