原文：https://www.cnblogs.com/shiyou00/p/6841801.html

art-template

javascript 模板引擎，官网：https://github.com/aui/art-template

分为原生语法和简洁语法，本文主要是讲简洁语法

  • 基础数据渲染
  • 输出HTML
  • 流程控制
  • 遍历
  • 调用自定义函数方法
  • 子模板引入

基础数据渲染

一、引入art-template.js文件

<script src="template-debug.js"></script>

二、编写HTML模板

<script id="test" type="text/html">

    <h1>{{title}}</h1>

</script>

三、向模板插入数据，并输出到页面

var data = {

    title:"hello world"

};

var html = template("test",data);

document.getElementById('content').innerHTML = html;

输出HTML

<script id="test" type="text/html">

    <h1>{{title}}</h1>

</script>

//注意：{{title}}这是对内容编码输出，应该写成{{#title}}这是对内容不编码输出

<script id="test" type="text/html">

    <h1>{{#title}}</h1>

</script>

var data = {

    title:"<p>hello world</p>"

};

var html = template("test",data);

document.getElementById('content').innerHTML = html;

流程控制语句（if else）

{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}
art-template里面的流程控制就相对其他模板来说强大很多了，直接看例子吧

<script id="test" type="text/html">

    <div>

        {{if bok==22}}

        <h1>线上</h1>

        {{else if bok==33}}

        <h2>隐藏</h2>

        {{else}}

        <h3>走这里</h3>

        {{/if}}

    </div>

</script>

<script>

    var data = {

        "bok":22

    };

    var html = template('test',data);

    document.getElementById("app").innerHTML = html;

</script>

嵌套的写法

<script id="test" type="text/html">

    <div>

        {{if bok}}

            {{if list.length>=0}}

                {{each list}}

                    <p>{{$index}}:{{$value}}</p>

                {{/each}}

            {{else}}

                <p>没有数据</p>

            {{/if}}

        {{/if}}

    </div>

</script>

<script>

    var data = {

        "bok":true,

        list:["a","b","c"]

    };

    var html = template('test',data);

    document.getElementById("app").innerHTML = html;

</script>

循环遍历语句

{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}

<script id="test" type="text/html">

<div>

    <ul>

        {{if c==100}}

            <ul>

                {{each person}}

                    <li>

                        编号：{{$index+1}}--姓名：{{$value.name}}--年龄：{{$value.age}}

                    </li>

                {{/each}}

            </ul>

        {{/if}}

    </ul>

</div>

</script>

<script>

    var data = {

        c:100,

        person:[

            {name:"jack",age:18},

            {name:"tom",age:19},

            {name:"jerry",age:20},

            {name:"kid",age:21},

            {name:"jade",age:22}

        ]

    };

    var html = template("test",data);

    document.getElementById("content").innerHTML = html;

</script>

调用自定义方法

通过template.helper(name,fnCallBack)注册方法
可以直接在{{}}中调用

<script id="test" type="text/html">

<div>

    {{if c==100}}

        <ul>

            {{each person}}

                <li>姓名：{{$value.name}}--性别：{{show($value.sex)}}</li>

            {{/each}}

        </ul>

    {{/if}}

</div>

</script>

<script>

    var data = {

        c:100,

        person:[

            {name:"jack",age:18,sex:1},

            {name:"tom",age:19,sex:0},

            {name:"jerry",age:20,sex:0},

            {name:"kid",age:21,sex:1},

            {name:"jade",age:22,sex:0}

        ]

    };

    //自定义函数

    template.helper("show",function(sex){

        console.log(sex);//同样可以打印日志到控制台

        if(sex==0){

            return "男"

        }else if(sex==1){

            return "女"

        }

    });

    var html = template("test",data);

    document.getElementById("app").innerHTML = html;

</script>

调用子模板

{{include 'main'}} 引入子模板，数据默认为共享
{{include 'main' a}} a为制定数据，但是同样必须是父级数据，可以看看下面的例子，如果不注入的a的话，引入的子模板是接受不到数据的

<body>

<div id="app"></div>

<script src="template-debug.js"></script>

<script id="main" type="text/html">

    <ul>

       {{each list}}

            <li>{{$value}}</li>

        {{/each}}

    </ul>

</script>

<script id="test" type="text/html">

    <div>

        <ul>

            {{each person}}

                <li>{{$value.name}}</li>

            {{/each}}

        </ul>

        {{include 'main' a}}

    </div>

</script>

<script>

    var data = {

        person:[

            {name:"jack",age:18},

            {name:"tom",age:19},

            {name:"jerry",age:20},

            {name:"kid",age:21},

            {name:"jade",age:22}

        ],

        a:{

            list:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

        }

    };

    var html = template("test",data);

    document.getElementById("app").innerHTML=html;

</script>

</body>

如有笔误，请留言指出，共同进步！

js模板引擎-art-template常用总结（转）的更多相关文章

  1. js 模板引擎 -Art Template

    一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  2. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  3. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  4. js模板引擎

    js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...

  5. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  6. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  7. Filter - Surge.js模板引擎过滤器

    版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...

  8. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

  9. JS模板引擎：tppl

    全球最快的JS模板引擎:tppl 废话不多说,先上测试: 亲测请访问:[在线测试地址]单次结果不一定准确,请多测几次. tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发 ...

  10. 百度JS模板引擎 baiduTemplate 1.0.6 版

    A.baiduTemplate 简介 0.baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 注:等不及可以直接点左侧导航中的”C.使用举例“,demo即刻试用. 1.应用场景: ...

随机推荐

  1. 利用css3给座右铭设置漂亮的渐变色

    .footer-container .footer-content p .motto { font-weight: bolder; -webkit-background-clip: text; -we ...

  2. layui(六)——upload组件常见用法总结

    layui中提供了非常简单的文件上传组件,这里写了一个上传图片的栗子,上传成功后返回图片在服务器的路径,并设置为页面中img的src属性.因为上传十分简单,没什么可说的,就直接上代码了. html代码 ...

  3. Can't read swagger JSON from http://localhost:8080/Test/api-docs

    新手入坑Swagger,搜了下网上博客,各种整合费时费力.弄出来竟然报错: Can't read swagger JSON from http://localhost:8080/Test/api-do ...

  4. HDU 1115(求质量均匀分布的多边形重心 物理)

    题意是给一个 n 边形,给出沿逆时针方向分布的各顶点的坐标,求出 n 边形的重心. 求多边形重心的情况大致上有三种: 一.多边形的质量都分布在各顶点上,像是用轻杆连接成的多边形框,各顶点的坐标为Xi, ...

  5. Spark源码剖析 - SparkContext的初始化(七)_TaskScheduler的启动

    7. TaskScheduler的启动 第五节介绍了TaskScheduler的创建,要想TaskScheduler发挥作用,必须要启动它,代码: TaskScheduler在启动的时候,实际调用了b ...

  6. ArcGis Python脚本——ArcGIS 中使用的 Python 是什么版本

    Python 编程语言用于自 9.0 起的各版本 ArcGIS 中,并被整合到 ArcMap 和 ArcGIS for Server 的自动安装中. ArcGIS 将在完整安装过程中安装下列 Pyth ...

  7. 使用 CROSS APPLY 与 OUTER APPLY 连接查询

    Ø  前言 日常开发中遇到多表查询时,首先会想到 INNER JOIN 或 LEFT OUTER JOIN 等等,但是这两种查询有时候不能满足需求.比如,左表一条关联右表多条记录时,我需要控制右表的某 ...

  8. ****** 二十八 ******、软设笔记【数据库】-分布式数据库、特点、数据存储、DBMS组成

    分布式数据库    一.分布式数据库        分布式数据库由一组数据组成,这些数据物理上分布在计算机网络的不同结点(场地)上,逻辑上是属于同一个系统.每个结点可以执行局部应用,也能通过网络通信子 ...

  9. Listener 快速开始

    [SessionListener] @WebListenerpublic class SessionListener implements HttpSessionListener,HttpSessio ...

  10. python2 编码与解码

    #!coding: utf-8 s = "特斯拉" s_to_unicode = s.decode("utf-8") unicode_to_gbk = s_to ...