artTemplate模版使用

最新推荐文章于 2022-03-20 23:45:56 发布

起个名字都这么麻烦

最新推荐文章于 2022-03-20 23:45:56 发布

阅读量149

点赞数

分类专栏：前端文章标签： artTemplate 模版使用

本文链接：https://blog.csdn.net/qq_35003310/article/details/103446676

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

循环{{each arr as value i}}

<body>
    <input type="text" placeholder="请输入" id="keyword" value="java"/>
    <input type="button" value="确定" id="but" />
    <ul id="uu"></ul>


    <!-- 用于jq库 -->
    <script src="../js/jquery-1.12.1.js"></script>
    <!-- 引入模版 -->
    <script src="../js/template-web.js"></script>
    <!-- 编写模版 -->
    <script id="resultTemplate" type="text/html">
       	//each: 循环
        //s: data中的属性
        //as: 关键字
        //value: 每次遍历的值
        //i: 索引
        {{each s as value i}}
            <li>{{i}}:{{value}}</li>
        {{/each}}
    </script>
    <script>
        document.getElementById("but").onclick = function () {
            var keyword = document.getElementById("keyword").value;

            $.ajax({
                url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                data: { wd: keyword },
                success: function (data) {
                    //将模版和数据一起传入, 返回的是已经编写好的html代码
                    var html = template("resultTemplate", data);
                    //将代码直接放入即可使用
                    document.getElementById("uu").innerHTML= html;
                },
                dataType: "jsonp",
                jsonp: "cb",
                jsonpCallback: "haha"
            });
        };
    </script>
</body>

if语句 {{if isAdmain}}

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

    <!-- 引擎模版 -->
    <script src="../js/template-web.js"></script>
    <!-- 模版 -->
    <script type="text/html" id="text">
        <!-- if语句:  isAdmain: data对象中的关键字 -->
        {{if isAdmain}}
            <!-- data中的关键字 -->
            <h2>title</h2>
            <!-- ul放在循环语句外面, 不循环 -->
            <ul>
                {{each list as value i}}
                    <li>{{i}}:{{value}}</li>
                {{/each}}
            </ul>
        {{/if}}

        {{if !isAdmain}}
            <h1>没有该数据</h1>
        {{/if}}
    </script>
    <script>
        var data = {
            title:'条件判断基本粒子',
            isAdmain:false,
            list:['文艺','青年','沙雕','白龙马','火焰山','上完课','去拉屎']
        };
        var html = template("text",data);
        document.getElementById("conetent").innerHTML = html;
    </script>
</body>

当数据只是数组格式时

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

    <!-- 引入引擎模版 -->
    <script src="../js/template-web.js"></script>
    <!-- 编写模版 -->
    <script id="text" type="text/html">
        <ul>
            <!-- arr: 需要解析的那个数组的名字叫什么就写什么 -->
            {{each arr as value i}}
                <li>{{i}}:{{value}}</li>
            {{/each}}
        </ul>
    </script>
    <script>
        var data = ["张三丰", "张翠山", "张无忌", "张大侠", "张二狗", "张小福"];
        //数组模式无法.出来, 所以封装进对象里
        var temp = {};
        temp.arr = data;
        var html = template("text", temp);
        document.getElementById("content").innerHTML = html;
    </script>
</body>

转义{{#}} 与不转义{{}}

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

    <!-- 引入引擎模版 -->
    <script src="../js/template-web.js"></script>
    <!-- 建模版 -->
    <script id="text" type="text/html">
        <p>不转义: {{#value}}</p>
        <p>转义: {{value}}</p>
    </script>
    <script>
        //数据
        var data = {value:'<span style="olor:red">这是一个P</span>'};
        //放入方法内
        var html = template("text",data);
        document.getElementById("content").innerHTML = html;
    </script>
</body>

案例

天气查询案例，该编码为中国气象网城市编码（不是地区编码）

地址	http://cdn.weather.hao.360.cn/sed_api_weather_info.php
作用	获取天气信息
请求类型	get
参数	app:hao360(固定值); code:城市编码(101010100北京);
	_jsonp:回调函数名
返回字段说明	area:地区信息
	pm25: pm2.5数据
	pubdate:数据发布日期
	pubtime:数据发布时间
	time:时间戳
	weather:天气信息
	date:时间
	day: 白天
	night:黑夜
	dawn:黎明

<body>
    <select name="city" id="city">
        <option value="101010100">北京市</option>
        <option value="101280101">广州市</option>
    </select>
    <input type="button" id="but" value="查询" />
    <div id="conetent"></div>

    <script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
    <script type="text/javascript" src="../js/template-web.js"></script>
    <script type="text/html" id="weatherTemplate">
        <ul>
            <span>发布时间: {{pubdate}} - {{pubtime}}</span>
            <ul>
                <li>城市: {{realtime.city_name}}</li>
                <li>温度: {{realtime.weather.temperature}}</li>
                <li>天气: {{realtime.weather.info}}</li>
                <li>风向: {{realtime.wind.direct}}</li>
                <li>风级: {{realtime.wind.power}}</li>
            </ul>
        </ul>
    </script>
    <script>
        document.getElementById("but").onclick = function () {
            //获取地区编码
            var cityValue = document.getElementById("city").value;
            //发送跨域请求
            $.ajax({
                url: "http://cdn.weather.hao.360.cn/sed_api_weather_info.php",
                data: {
                    app: "hao360",
                    code: cityValue
                },
                jsonp: "_jsonp",
                dataType: "jsonp",
                success: function (data) {
                    console.log(data);
                    console.log("==========================================================");
                    //放入模版
                    var html = template("weatherTemplate", data);
                    document.getElementById("conetent").innerHTML = html;
                }
            });
        };
    </script>
</body>