0
点赞
收藏
分享

微信扫一扫

baiduTemplate

思考的鸿毛 2021-09-24 阅读 8
一点点

最近看了下baiduTemplate。感觉跟artTemplate类似。所有就简单的记录一下。

1.顶部引入baiduTemplate.js文件
2.body里面设置一个元素设置类名或者id,以便后面注入模板生成的html;
3.body后面创建一个script标签,type="text/html" 在里面写模板 与artTemplate类似。 <% %> 里面写自己的逻辑,赋值用=
4.在后面再创建一个script标签。里面整合数据到模板中,并赋值给第二步的元素;

下面是一个栗子

<!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="box"></div>
    <script type="text/javascript" src="./baiduTemplate.js"></script>
    <script type="text/html" id="test">
        <h1>
            <%=title%>
        </h1>
        <div>
            <%if(list.length){%>
                <%for(var i=0;i < list.length; i++){%>
                    <p>
                        <%=list[i]%>
                    </p>
                <%}%>
            <%}%>
        </div>
    </script>
    <script>
        var data = {
            title: "我是标题",
            list: ['内容一', '内容二', '内容三']
        }
        var html = baidu.template('test', data);
        document.querySelector("#box").innerHTML = html;
    </script>
</body>
</html>
举报
0 条评论