模板引擎art-template

最新推荐文章于 2023-01-03 12:34:09 发布

Silent Land

最新推荐文章于 2023-01-03 12:34:09 发布

阅读量254

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_44757417/article/details/108156196

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

模板引擎art-template

官网

使用流程（4步）

导入模板引擎art- template.js文件

<script src="./libs/template-web.js"></script>

写HTML模板
（1）模板写到哦script标签中
（2）必须设置id
（3）必须要设置type（一般为type=“text/html”）

<script id='tpl' type="text/html"></script>

调用art-template的官方API开始解析模板
（1）第一个参数：你的模板id名
（2）第二个参数：你想要解析的js对象
（3）返回值：解析数据之后的HTML字符串

let htmlStr =  template('tpl', jsonObjc.data);

将解析好的模板显示到页面

document.body.innerHTML = htmlStr;

案例：

<!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>
    <h2>天气查查查--</h2>
    <input type="text" placeholder="请输入查询的城市" class="search" />
    <p class="suggest"></p>
    <ul class="weather"></ul>
</body>

</html>
<script src="jquery-1.12.4.js"></script>
<!-- 1.导包 -->
<script src="template-web.js"></script>
<!-- 2.写模板 天气列表模板-->
<script id="weather_list" type="text/html">
    
        {{ each data.forecast }}
                <li>
                <span>{{ $value.date }}</span>--
                <span>{{ $value.high }}</span>--
                <span>{{ $value.low }}</span>--
                <span>{{ $value.type }}</span>
                </li>
        {{ /each}}
   
</script>
<script>
    /*
      请求地址：http://wthrcdn.etouch.cn/weather_mini
      请求方法：get
      请求参数：city
      示例： http://wthrcdn.etouch.cn/weather_mini?city=深圳
  
      步骤：
      1. 文本框按下事件： enter键 keyCode=13
      2. 获取文本框的内容
      3. ajax获取数据
      4. 数据返回之后渲染到页面  
    */

    $(function () {
        // 1.给输入框注册键盘按下(监听enter键)
        $('.search').keydown(function (e) {
            if (e.keyCode != 13) return;
            // 2.获取输入的文本
            let searchCity = $(this).val();
            // 3.ajax发送请求
            $.ajax({
                url: 'http://wthrcdn.etouch.cn/weather_mini',
                type: 'get',
                data: {
                    city: searchCity
                },
                dataType: 'json',
                success: function (backData) {
                    console.log(backData);
                    // 4.数据响应之后渲染页面
                    // 4.1ganmao信息
                    $('.suggest').text(backData.data.ganmao);
                    // 4.2遍历backData.forecast生成li元素
                    // 先清除上一次的数据
                    // $('.weather').empty();
                    // let htmlStr = template('weather_list', backData);
                    // $('.weather').html(htmlStr);
                    $('weather').html( template('weather_list', backData))
                }
            });
        });
    });
</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>

    <!-- 1.导包 -->
    <script src="./libs/template-web.js"></script>
</head>
<body>
    <!-- 2.写模板 -->
    <script id="weather_list" type="text/html">
        <!-- 模板语法 -->
        <!-- (1)输出 : 支持对象取值，数组取值，算术运算，逻辑运算，三元运算 -->
        <!-- 第一种写法：大胡子mustache语法 -->
        <p> {{ data.ganmao }} </p>
        <!-- 第二种写法：标准语法 -->
        <p> <%= data.ganmao %></p>
        <p> {{ data.forecast[0].date }} </p>
        <p> {{ data.wendu + 1 }}</p>
        <p> {{ +data.wendu + 1 }}</p>
        <p> {{ data.wendu > 25 ? '好热':'好冷' }}</p>

        <!-- (2)条件分支 -->
        {{ if data.wendu > 30 }}
            <p>如果条件成立，我才会渲染</p>
            <p>如果条件不成立，我就渲染</p>
        {{ /if }}

        <!-- (3)循环遍历 -->
        {{ each data.forecast }}
            <li>
                <span>数组下标： {{ $index }}</span>
                <span>数组元素： {{ $value  }}</span>
            </li>
        {{ /each }}

    </script>

    <script>
        let jsonObj = '{"data":{"yesterday":{"date":"20日星期四","high":"高温 32℃","fx":"东南风","low":"低温 26℃","fl":"<![CDATA[2级]]>","type":"阴"},"city":"深圳","forecast":[{"date":"21日星期五","high":"高温 32℃","fengli":"<![CDATA[2级]]>","low":"低温 26℃","fengxiang":"东南风","type":"多云"},{"date":"22日星期六","high":"高温 32℃","fengli":"<![CDATA[2级]]>","low":"低温 26℃","fengxiang":"南风","type":"雷阵雨"},{"date":"23日星期天","high":"高温 32℃","fengli":"<![CDATA[2级]]>","low":"低温 26℃","fengxiang":"南风","type":"雷阵雨"},{"date":"24日星期一","high":"高温 32℃","fengli":"<![CDATA[3级]]>","low":"低温 27℃","fengxiang":"南风","type":"雷阵雨"},{"date":"25日星期二","high":"高温 31℃","fengli":"<![CDATA[3级]]>","low":"低温 26℃","fengxiang":"西南风","type":"雷阵雨"}],"ganmao":"感冒低发期，天气舒适，请注意多吃蔬菜水果，多喝水哦。","wendu":"29"},"status":1000,"desc":"OK"}';
        let backData = JSON.parse(jsonObj);
        console.log(backData);

        //3.调用官方API
        let htmlStr =  template('weather_list',backData);
        //4.渲染解析好的模板
        document.body.innerHTML += htmlStr;
    </script>
</body>
</html>

模板引擎易错点

导入js文件
- a.文件路径写错
写模板
（1） script标签的id没有设置
（2） script标签的type属性写错
- 一般设置为 text/html
- 不能不写，也不能是 text/javascript，否则浏览器会以为这是js代码来解析
  c. 模板语法写错
- 只要模板语法写错，浏览器就会报错（这是一个固定格式的报错提示,会告诉你出错的位置）
  d. 模板中对象属性名写错，浏览器不会报错但是数据无法渲染
调用api解析渲染模板
参数传错（第一个是模板script标签的id，第二个是要解析的数据js对象）
将解析好的模板显示到页面