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

这段代码很简洁

var html = template('detail', {data: data.data, shstatus: status});

artDialog({

    content: '<div id="vorder_detail">' + html + '</div>',

    lock: true, fixed: 1, resize: 1, title: '订单详情', top: 100,

});

主要用的是template方法 渲染HTML

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

    <div>

        <table class="table table-bordered">

            <tr>

                <td>分销商用户名</td>

                <td>{{data.upload_account}}</td>

            </tr>

            <tr>

                <td>淘宝订单号</td>

                <td>{{data.taobao_order_id}}</td>

            </tr>

            <tr>

                <td>入网姓名</td>

                <td>{{data.realname.realname}}</td>

            </tr>

            <tr>

                <td>入网身份证</td>

                <td>{{data.realname.cert_no}}</td>

            </tr>

            <tr>

                <td>收货人姓名</td>

                <td>{{data.to_name}}</td>

            </tr>

            <tr>

                <td>订单状态</td>

                <td>{{shstatus[data.status]}}</td>

            </tr>

            <tr>

                <td>审核者</td>

                <td>{{data.audit_user}}</td>

            </tr>

            <tr>

                <td>审核理由</td>

                <td>{{data.reason}}</td>

            </tr>

            <tr>

                <td>审核时间</td>

                <td>{{data.audit_time}}</td>

            </tr>

            <tr>

                <td>申请时间</td>

                <td>{{data.createtime}}</td>

            </tr>

        </table>

    </div>

</script>

渲染结束得到HTML赋值然后显示，后来查看了一下官方的例子讲解的比较好，只要引入 http://aui.github.io/artTemplate/dist/template.js 即可，代码如下

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>basic-demo</title>

<script src="http://aui.github.io/artTemplate/dist/template.js"></script>

</head>

<body>

<div id="content"></div>

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

{{if isAdmin}}

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

<ul>

    {{each list as value i}}

        <li>索引 {{i + 1}} ：{{value}}</li>

    {{/each}}

</ul>

{{/if}}

</script>

<script>

var data = {

    title: '基本例子',

    isAdmin: true,

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

};

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

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

</script>

</body>

</html>

art template前端模板引擎的更多相关文章

  1. SS - DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码. 个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离. 为了理解模板引 ...

  2. DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原 ...

  3. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

  4. JST(JavaScript Trimpath)前端模板引擎简介

    JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...

  5. artTemplate-优秀的前端模板引擎

    artTemplate-优秀的前端模板引擎 1.html中引入artTemplate的js文件: <script type="text/javascript" src=&qu ...

  6. 前端模板引擎doT.js的用法

    简介 一款简单好用的前端模板引擎 用法 <script type="text/javascript" src="js/doT.min.js">< ...

  7. jquery template.js前端模板引擎

    作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...

  8. 前端模板引擎artTemplate.js

    . 关于artTemplate模板引擎的详细原理请移步高性能JavaScript模板引擎原理解析,本文只探讨如何使用.初学前端的人一般对于绑定数据都是使用原生js或者jquery来拼接字符串,此为ha ...

  9. 前端模板引擎doT.js的使用

    前言 我们在做前端开发时,经常需要根据后台返回的json数据动态生成html并插入到页面中显示.最简单的方法就是通过jQuery去遍历数据拼接html,如以下: <script> var ...

随机推荐

  1. php不允许用户提交空表单(php空值判断)

    我们在设计提交空的评论时依然可以写入数据库,并在页面显示出来.这显然是不合理的,所以需要我们加入空值判断 可以修改代码,添加些判断: 复制代码代码如下:   if(empty($_POST['name ...

  2. PHP接口(interface)和抽象类(abstract)

    interface 定义了一个接口类,它里面的方法其子类必须实现.接口是类的一个模板,其子类必须实现接口中定义的所有方法. interface User{     function getHeight ...

  3. 【 java版坦克大战--事件处理】 坦克动起来了

    折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ①   paint ...

  4. 格式化分区，报/dev/sdb1 is apparently in use by the system; will not make a filesystem here!

    [root@RAC2 ~]# mke2fs /dev/sdb1mke2fs 1.39 (29-May-2006)/dev/sdb1 is apparently in use by the system ...

  5. PHP中的urlencode和urldecode的理解

    平时在工作中经常要写 $xxx = urldecode($_GET['xxx']);的类似代码,大部分的情况都是没有问题的.也能很好的工作. 所以也没有怎么在意.但是突然有一天我想到 $xxx =$_ ...

  6. Discuz <= 7.2 SQL注入漏洞详情

    在<高级PHP应用程序漏洞审核技术>[1]一文里的"魔术引号带来的新的安全问题"一节里,有 提到通过提取魔术引号产生的“\”字符带来的安全问题,同样这个问题在这里又一次 ...

  7. cf 219D

    树形dp; 思想: 把正向边赋值为0:反向边赋值为1:然后求出点到其他点的最小距离: 两次dfs: 第一次是从下往上:记录每个点到所有子树中需要改变的边的条数: 第二次是自上往下:由父节点求子节点到所 ...

  8. Img图片超过了DIV的最大宽度 解决方案

    在该图片所在的div限定一下里边所有的图片的最大长度,这个长度的值可以是div的长度的略小即可. 例如: <div class="content" style="w ...

  9. CF_91B

    题目意思是这样的:给定n个整数,求第i个数右边的距离它最远的比它小的数的下标之差然后再减1. 这里既然是需要知道距离该数最远的下标,可以从右至左扫描一遍,然后按照单调递减的顺序入栈,即只把比栈顶元素小 ...

  10. 李洪强漫谈iOS开发[C语言-031]-逻辑短路