art-template使用

時間 2019-11-19

標籤 art template 使用简体版

原文原文鏈接

art-template是一個預編譯工具,在實際應用上能夠簡化拼接字符串;html

這是中文文檔:https://aui.github.io/art-template/zh-cn/docs/syntax.html (目前art-template.js的版本是4.12.2);前端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="div1"></div>
</body>

</html>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/art-template.js"></script>
<script id="ul1" type="text/html">
    <ul>
        {{each data}}
        <li>{{$index}} {{$value.name}}</li>
        {{/each}}
    </ul>
</script>
<script>
    //demo:


    $.ajax({

        url: "https:www.easy-mock.com/mock/5af2a947086dd715d58ab833/API/getname",

        success: function (res) {

            console.log(res) //數據格式 {data:[{name:'liu'},{name:'long'}]}

            $("#div1").html(template("ul1", res));  //data和res有對應關係;data就是res的下級;(上下級語法):

　　　　　　　//or

 　　　　　　 $("#div1").html(template("ul1", {data:res.data}));  //或者直接關係;(對象語法)

}, error:function(res){ console.log(res) } }) </script>

順便介紹一下: https:www.easy-mock.com 是一個免費的先後端數據模擬工具(請求不要太頻繁),能夠根據本身自定義的API生成返回的數據;python

固然:前端的頁面在本地是打不開的,有ajax請求限制;jquery

咱們能夠用python3工具自帶的本地服務器: (前提安裝python環境) DOS 下cd 到哪一個目錄本身決定,而後 python -m http.server 80 ; OK 好了瀏覽器能夠預覽上述結果了;git

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。