艺术模板 art-template-web

最新推荐文章于 2022-09-05 09:58:32 发布

aof26372

最新推荐文章于 2022-09-05 09:58:32 发布

阅读量137

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tianxiaxuange/p/10173117.html

版权

艺术模板 art-template____jQuery 项目可用

最快的模板渲染引擎

兼容 ejs 语法

推荐语法

{{$value}} ---- {{$index}}

1. 下载或者安装

2. 引入 template-web.js 库

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/template-web.js"></script>
<script type="text/javascript" src="./js/jquery_ajax.js"></script>

2. 创建模板代码

1) 创建 script 标签，将其 type 改为 text/html

2) 设置一个 id 属性

3) 写模板代码

const arr = [{name: 'jaek', age:20}, {name:'rose', age:18}];

const obj = {name: 'jaek', age:20};

3. template(元素id, {要渲染的数据}) 将模板代码解析为标签字符串

传一个数组 data，接的就是一个同名的数组 data[0].name

传一个对象 obj，接的就是一个同名的对象 obj.name

返回的是一个 htmlStr，用于追加到页面生效

4. 将生成的标签字符串渲染到页面上生效

实例代码:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>jQuery 中的 ajax</title>
        <link rel="stylesheet" href="./css/index.css">
    </head>
    
    <body>
        <div id="outer_box">
            <select id="province">
                <option>请选择省份</option>
            </select>省
        
            <select id="city">
                <option>请选择市</option>
            </select>市
        
            <select id="county">
                <option>请选择区(县)</option>
            </select>区(县)
        </div>
    
        <script type="text/html" id="templateScript">
            <option>{{firstOption}}</option>
        {{each data}}
            <option value="{{$value[name]}}">{{$value.name}}</option>
        {{/each}}
        </script>
        
        
        
        
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript" src="./js/template-web.js"></script>
        <script type="text/javascript" src="./js/jquery_ajax.js"></script> <!-- 注意编写顺序 -->
    </body>
</html>

jquery_ajax.js

$(function () {
    const $province = $("#province");
    const $city = $("#city");
    const $county = $("#county");
    
    // 进入页面 首先渲染省份
    $.get("http://localhost:3000/province", function({code, data}){
        if(code === 200){
            const htmlStr = template(
                'templateScript',
                {data, firstOption: '请选择省份', name: 'province'}
            );
            $province.html(htmlStr);
        }else{
            alert(data);    // 网络不稳定，请刷新重试
        };
    });
    
    // 省 改变出现 市
    $province.on("change", function(){
        const province = this.value;    /* <option value="11">北京</option> */
        $.get('/city', {province}, function({code, data}){
            if(code === 200){
                const htmlStr = template(
                    'templateScript',
                    {data, firstOption: '请选择市', name: 'city'}
                );
                $city.html(htmlStr);
            }else{
                alert(data);    // 网络不稳定，请刷新重试
            };
        });
    });
    
    // 市 改变出现 县
    $city.on("change", function(){
        const province = $province.val();    /* <option value="11">北京</option> */
        const city = $city.val();    /* <option value="undefined">鞍山市</option> */
        $.get('/county', {province, city}, function({code, data}){
            if(code === 200){
                const htmlStr = template(
                    'templateScript',
                    {data, firstOption: '请选择区县', name: 'county'}
                );
                $county.html(htmlStr);
            }else{
                alert(data);    // 网络不稳定，请刷新重试
            };
        });
    });
});