艺术模板 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. 浅谈PageHelper插件分页实现原理及大数据量下SQL查询效率问题解决

    前因:项目一直使用的是PageHelper实现分页功能,项目前期数据量较少一直没有什么问题.随着业务扩增,数据库扩增PageHelper出现了明显的性能问题.几十万甚至上百万的单表数据查询性能缓慢,需 ...

  2. java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  3. 第十节：数据批注(DataAnnotationModel)和自定义验证(包括Model级别的验证)

    一. 简介 写完上一个章节MVC中的常用特性,迫不及待将该系列补全,该章节主要介绍数据批注(也叫:注解). 一听[数据批注],好高大上的名字,但仔细一看,它们其实是[System.ComponentM ...

  4. [物理学与PDEs]第2章习题11 Lagrange 形式的一维理想流体力学方程组在强间断线上的间断连接条件

    对由第 10 题给出的 Lagrange 形式的一维理想流体力学方程组, 给出解在强间断线上应满足的间断连接条件 (假设体积力 $F\equiv 0$). 解答: $$\beex \bea \sez{ ...

  5. Pandas的一些简单函数总结

    pd.Series(my_list) # 从一个可迭代的对象 my_list 中创建一个数据组df.index = pd.date_range('2017/1/1', periods=df.shape ...

  6. redis 远程操作命令

    在远程服务上执行命令 如果需要在远程 redis 服务上执行命令,同样我们使用的也是 redis-cli 命令. 语法 $ redis-cli -h host -p port -a password ...

  7. Google Android SDK开发范例大全笔记 一

    方法讲解 1 获取手机分辨率方法 DisplayMetrics private void getDiaplayMetrics() { DisplayMetrics dm = new DisplayMe ...

  8. redis-hash操作

    hset(name, key, value) # name对应的hash中设置一个键值对(不存在,则创建:否则,修改) # 参数: # name,redis的name # key,name对应的has ...

  9. Windows Internals 笔记——CreateProcess

    1.一个线程调用CreateProcess时,系统将创建一个进程内核对象,其初始使用计数为1.然后系统为新进程的主线程创建一个线程内核对象(使其计数为1). 2.CreateProcess在进程完全初 ...

  10. echart 饼状图自定义样式

    echarts.init(document.getElementById('WaterCategoryStatistics')).setOption({ legend: { orient:'verti ...