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