藝術模板 art-template-web

時間 2019-11-08

標籤藝術模板 art template web 欄目 HTML 简体版

原文原文鏈接

藝術模板 art-template____jQuery 項目可用javascript

最快的模板渲染引擎css

兼容 ejs 語法html

推薦語法java

{{each arr}}jquery

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

{{/each}}github

{{if arr}}web

{{arr}}ajax

{{/if}}數組

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);    // 網絡不穩定，請刷新重試
            };
        });
    });
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。