艺术模板 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. sublime中编译的sass如何改变css输出风格？【这里有答案】

    由于在网上找了一遍没找到如果在sublime中将sass编译的css转换成为自己喜欢的风格,所以换了一种思路搜索到了答案,这里我将讲述如果更改. 首先sass总共有四种编译风格 (1) nested( ...

  2. 第九节: 利用RemoteScheduler实现Sheduler的远程控制

    一. RemoteScheduler远程控制 1. 背景: 在A服务器上部署了一个Scheduler,我们想在B服务器上控制这个Scheduler. 2. 猜想: A服务器上的Scheduler需要有 ...

  3. 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性)

    一. 简介 上一个章节中,也介绍了立即加载和延迟加载,但上一个章节是针对单表而言的,不含外键,立即也好,延迟也好,都是指单表中的数据.但本章节重点介绍的三种加载方式均是针对含(导航属性.外键)的情况下 ...

  4. Android Studio生成签名文件,自动签名,以及获取SHA1和MD5值

    转载请标明出处:http://blog.csdn.net/donkor_/article/details/53487133 前言: 作为谷歌在2013年为开发者提供的IDE环境工具Android St ...

  5. HttpUtility.UrlEncode编码重写

    1. 某些系统方法,例如.NET系统方法HttpUtility.UrlEncode会将‘=’编码成‘%3d’,而不是%3D,导致加密签名通不过验证,请开发者注意检查. 2.Java 1.3和早期版本中 ...

  6. Centos7 安装 tree

    Centos7 安装 tree 用命令 yum 安装  tree yum -y install tree

  7. 模组 前后端分离CURD 组件

    js (function () { // {# -------------------------------------------------------------------------- # ...

  8. css之自定义滚动条

    <div class="alertbox index-rulebox" style="display:none"> <div class=&q ...

  9. ROS-PCL点云库的安装

    网上各种说安装点云库还慢,中间出现一些没有依赖库的情况,但在我这里都是很顺利,难道是一开始安装了ROS的原因?不是很清楚,暂且将过程写下来. 一,下载PCL $ git clone https://g ...

  10. celery 大量消息的分布式系统 定时任务

    Celery 1.什么是Celery Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列 同时也支持任务调度 Celery架构 https://www.jia ...