art-template.js 下载以及使用

个人习惯使用原生语法

github：https://github.com/aui/art-template ie8也可以使用

中文文档： art-template https://aui.github.io/art-template/zh-cn/docs/index.html

可以在文档或者 github上下载现在命名为 template-web.js

使用 demo

<!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>
    <link rel="stylesheet" href="css/mui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        p {
            border: 1px solid red;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script src="js/mui.js"></script>
    <script src="js/template-web.js"></script>
    <!-- <script src="js/template-native.js"></script> -->
</head>

<body>
    <div class="box" id="shigebox">


    </div>
</body>
<script id="template" type="text/html">
    <div>
        <ul>

            <% for (var i = 0; i < result.length; i++) { %>


                <li>


                    <%=result[i]%>
                </li>
                <%}%>
        </ul>
    </div>
</script>
<script>
    getData()

    function getData() {
        $.ajax({
            url: 'https://api.apiopen.top/getSongPoetry?page=1&count=20',
            type: 'get',
            dataType: 'json',
            success: function(res) {
                console.log(res.result)
                // 注意点
                // 1. script模板的必须有id名 在template方法获取这个参数
                // 2. template方法的第二个参数 res是一个对象 {code: 200, message: '成功',result: [数组]}
                .// 因为我想渲染这个数组 所以在模板中使用的是 result[i] 这个参数必须前后统一 
                // 还有一点如果后端传过来的是html格式的 可以这样写 <%=#data%> 就是加了一个 # 
                var html = template('template', res)
                $('#shigebox').html(html)
            }
        })
    }
</script>

</html>

art-template.js 下载以及使用

个人习惯使用原生语法

猜你喜欢