艺术模板 art-template____jQuery 项目可用

最快的模板渲染引擎

兼容 ejs 语法

推荐语法

{{each arr}}

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

{{/each}}

{{if arr}}

{{arr}}

{{/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);    // 网络不稳定，请刷新重试
    
            };
    
        });
    
    });
    
});

艺术模板 art-template-web的更多相关文章

  1. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  2. DjangoMTV模型之视图层views及模板层template

    Django视图层中views的内容 一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容(render),也可以是一个重定向( ...

  3. 《JAVA设计模式》之模板模式(Template)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述模板方法(Template Method)模式的: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式 ...

  4. ASP。netcore,Angular2 CRUD动画使用模板包，WEB API和EF 1.0.1

    下载Angular2ASPCORE.zip - 1 MB 介绍 在本文中,让我们看看如何创建一个ASP.NET Core CRUD web应用程序与Angular2动画使用模板包,web API和EF ...

  5. Django 模板（Template）

    1. 模板简介 2. 模板语言 DTL 3. 模板继承 4. HTML 转义 5. CSRF 1. 模板简介 作为 Web 开发框架,Django 提供了模板,可以很便利的动态生成 HTML.模版系统 ...

  6. Django笔记&教程 3-1 模板（Template）基础

    Django 自学笔记兼学习教程第3章第1节--模板(Template)基础 点击查看教程总目录 1 介绍 模板文件:让Django能够自动生成html代码 作为一个web框架,Django需要需要在 ...

  7. 模板（Template）

    最近阅读google chromium base container stack_container代码,深刻感觉到基础知识不扎实. // Casts the buffer in its right ...

  8. 重载（Overloading）以及模板（Template）

    继续<C++ premier plus>的学习 (1)函数重载,通俗来说,就是相同的函数名字名下,存在多个函数,要使得这成立,各个同名函数必须形参列表(也称为"签名", ...

  9. Django——模板层(template)（模板语法、自定义模板过滤器及标签、模板继承）

    前言:当我们想在页面上给客户端返回一个当前时间,一些初学者可能会很自然的想到用占位符,字符串拼接来达到我们想要的效果,但是这样做会有一个问题,HTML被直接硬编码在 Python代码之中. 1 2 3 ...

随机推荐

  1. Entity Framework入门教程（17)---记录和拦截数据库命令

    记录和拦截数据库命令 这一节介绍EF6怎么记录和拦截发送给数据库的查询和操作命令. 1.记录EF发送给数据库命令(DbContext.Database.Log) 以前给了查看EF发送给数据库的命令我们 ...

  2. python中的GIL详解

    GIL是什么 首先需要明确的一点是GIL并不是Python的特性,它是在实现Python解析器(CPython)时所引入的一个概念.就好比C++是一套语言(语法)标准,但是可以用不同的编译器来编译成可 ...

  3. 【转载】C++ vector的用法

    http://www.cnblogs.com/Nonono-nw/p/3462183.html

  4. 动态规划dp

    一.概念:动态规划dp:是一种分阶段求解决策问题的数学思想. 总结起来就一句话:大事化小,小事化了 二.例子 1.走台阶问题 F(10):10级台阶的走法数量 所以:F(10)=F(9)+F(8) F ...

  5. 题解-AtCoder Code-Festival2017 Final-J Tree MST

    Problem \(\mathrm{Code~Festival~2017~Final~J}\) 题意概要:一棵 \(n\) 个节点有点权边权的树.构建一张完全图,对于任意一对点 \((x,y)\),连 ...

  6. day14 集合与函数

    数据类型和变量总结 字符串.数字.列表.元组.字典 可变:列表,字典 不可变:修改变量的值ID变,字符串,数字,元组 访问顺序: 直接访问:数字 顺序访问:字符串,列表,元组 映射:字典 存放元素个数 ...

  7. 第二周 数据分析之展示 Matplotlib基础绘图函数实例

    Pyplot基础图表函数 Pyplot饼图的绘制: Pyplot直方图的绘制: Pyplot极坐标图的绘制: Pyplot散点图的绘制: 单元小结: import numpy as np import ...

  8. Mockito框架入门教程（二）

    接上一篇,继续学习其它的.... 8.找出冗余的互动(即未被验证到的) @Test(expected = NoInteractionsWanted.class) public void find_re ...

  9. 【web】服务器推送的实现方式（转）

    轮询 http流 websocket   https://www.cnblogs.com/freud/p/8397934.html http2.0 浅谈Websocket.Ajax轮询和长连接(lon ...

  10. php中echo、print、print_r、var_dump、var_export区别

    (1) print和echo是语言结构,echo输出多个值,多个值之间用逗号分隔,无返回值:print只能输出一个值,有返回值.echo和print输出整型和字符串,没法打印布尔型,如果true,打印 ...