艺术模板 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. JS常用基础知识

    前言:在js中dom和bom是我们操作的基本,在最初接触时候我也懵,但是后来慢慢发现其实bom就是操作浏览器,而dom就是操作文本框节点.

  2. Spring Security 之方法级的安全管控

    默认情况下, Spring Security 并不启用方法级的安全管控. 启用方法级的管控后, 可以针对不同的方法通过注解设置不同的访问条件. Spring Security 支持三种方法级注解, 分 ...

  3. html css hover也会冒泡

    <HEAD> <style type="text/css"> div:hover { color:blue !important; } </style ...

  4. [译]Ocelot - Request Id / Correlation Id

    原文 Ocelot可以通过header的形式发送一个requestid.ocelot会将这个requestid转发到下游服务. 如果在日志配置中设置了IncludeScopes为true,那么requ ...

  5. 第30月第6天 git log

    1. git log git log 96a6f18b1e0a1b7301cb4f350537d947afeb22bc -p -1 我们常用 -p 选项展开显示每次提交的内容差异,用 -2 则仅显示最 ...

  6. spring事务源码分析结合mybatis源码(二)

    让我们继续上篇,分析下如果有第二个调用进入的过程. 代码部分主要是下面这个: if (isExistingTransaction(transaction)) { return handleExisti ...

  7. linux select 与 阻塞( blocking ) 及非阻塞 (non blocking)实现io多路复用的示例【转】

    转自:https://www.cnblogs.com/welhzh/p/4950341.html 除了自己实现之外,还有个c语言写的基于事件的开源网络库:libevent http://www.cnb ...

  8. TCP-IP详解笔记4

    TCP-IP详解笔记4 系统配置: DHCP和自动配置 每台主机和路由器需要一定的配置信息,配置信息用于为系统指定本地名称,及为接口指定标识符(如IP地址). 提供或使用各种网络服务,域名系统(DNS ...

  9. setTimeout 第三个参数秒懂

    好吧,假设你们都是从 ES6 里 promise 发现 setTimeout 还有第三个参数的,下面讲讲到底是干嘛的 setTimeout 第三个及之后的参数作用:定时器启动时候,第三个以后的参数是作 ...

  10. 在CentOs7上部署Gunicorn

    Gunicorn 的作用与优点这里就不再赘述,如不知道你也不会找这些对吧? 正文 安装简单,直接使用pip即可 pip3 install gunicorn 昨日在 Centos 中想部署Gunicor ...