文档章节

template.js 用法

猿神出窍
 猿神出窍
发布于 2017/09/08 16:40
字数 1184
阅读 29
收藏 0
点赞 0
评论 0

第一步:引入template.js

引入js:

/*!art-template - Template Engine | http://aui.github.com/artTemplate/*/
!function(){function a(a){return a.replace(t,"").replace(u,",").replace(v,"").replace(w,"").replace(x,"").split(y)}function b(a){return"'"+a.replace(/('|\\)/g,"\\$1").replace(/\r/g,"\\r").replace(/\n/g,"\\n")+"'"}function c(c,d){function e(a){return m+=a.split(/\n/).length-1,k&&(a=a.replace(/\s+/g," ").replace(/<!--[\w\W]*?-->/g,"")),a&&(a=s[1]+b(a)+s[2]+"\n"),a}function f(b){var c=m;if(j?b=j(b,d):g&&(b=b.replace(/\n/g,function(){return m++,"$line="+m+";"})),0===b.indexOf("=")){var e=l&&!/^=[=#]/.test(b);if(b=b.replace(/^=[=#]?|[\s;]*$/g,""),e){var f=b.replace(/\s*\([^\)]+\)/,"");n[f]||/^(include|print)$/.test(f)||(b="$escape("+b+")")}else b="$string("+b+")";b=s[1]+b+s[2]}return g&&(b="$line="+c+";"+b),r(a(b),function(a){if(a&&!p[a]){var b;b="print"===a?u:"include"===a?v:n[a]?"$utils."+a:o[a]?"$helpers."+a:"$data."+a,w+=a+"="+b+",",p[a]=!0}}),b+"\n"}var g=d.debug,h=d.openTag,i=d.closeTag,j=d.parser,k=d.compress,l=d.escape,m=1,p={$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1},q="".trim,s=q?["$out='';","$out+=",";","$out"]:["$out=[];","$out.push(",");","$out.join('')"],t=q?"$out+=text;return $out;":"$out.push(text);",u="function(){var text=''.concat.apply('',arguments);"+t+"}",v="function(filename,data){data=data||$data;var text=$utils.$include(filename,data,$filename);"+t+"}",w="'use strict';var $utils=this,$helpers=$utils.$helpers,"+(g?"$line=0,":""),x=s[0],y="return new String("+s[3]+");";r(c.split(h),function(a){a=a.split(i);var b=a[0],c=a[1];1===a.length?x+=e(b):(x+=f(b),c&&(x+=e(c)))});var z=w+x+y;g&&(z="try{"+z+"}catch(e){throw {filename:$filename,name:'Render Error',message:e.message,line:$line,source:"+b(c)+".split(/\\n/)[$line-1].replace(/^\\s+/,'')};}");try{var A=new Function("$data","$filename",z);return A.prototype=n,A}catch(a){throw a.temp="function anonymous($data,$filename) {"+z+"}",a}}var d=function(a,b){return"string"==typeof b?q(b,{filename:a}):g(a,b)};d.version="3.0.0",d.config=function(a,b){e[a]=b};var e=d.defaults={openTag:"<%",closeTag:"%>",escape:!0,cache:!0,compress:!1,parser:null},f=d.cache={};d.render=function(a,b){return q(a)(b)};var g=d.renderFile=function(a,b){var c=d.get(a)||p({filename:a,name:"Render Error",message:"Template not found"});return b?c(b):c};d.get=function(a){var b;if(f[a])b=f[a];else if("object"==typeof document){var c=document.getElementById(a);if(c){var d=(c.value||c.innerHTML).replace(/^\s*|\s*$/g,"");b=q(d,{filename:a})}}return b};var h=function(a,b){return"string"!=typeof a&&(b=typeof a,"number"===b?a+="":a="function"===b?h(a.call(a)):""),a},i={"<":"&#60;",">":"&#62;",'"':"&#34;","'":"&#39;","&":"&#38;"},j=function(a){return i[a]},k=function(a){return h(a).replace(/&(?![\w#]+;)|[<>"']/g,j)},l=Array.isArray||function(a){return"[object Array]"==={}.toString.call(a)},m=function(a,b){var c,d;if(l(a))for(c=0,d=a.length;c<d;c++)b.call(a,a[c],c,a);else for(c in a)b.call(a,a[c],c)},n=d.utils={$helpers:{},$include:g,$string:h,$escape:k,$each:m};d.helper=function(a,b){o[a]=b};var o=d.helpers=n.$helpers;d.onerror=function(a){var b="Template Error\n\n";for(var c in a)b+="<"+c+">\n"+a[c]+"\n\n";"object"==typeof console&&console.error(b)};var p=function(a){return d.onerror(a),function(){return"{Template Error}"}},q=d.compile=function(a,b){function d(c){try{return new i(c,h)+""}catch(d){return b.debug?p(d)():(b.debug=!0,q(a,b)(c))}}b=b||{};for(var g in e)void 0===b[g]&&(b[g]=e[g]);var h=b.filename;try{var i=c(a,b)}catch(a){return a.filename=h||"anonymous",a.name="Syntax Error",p(a)}return d.prototype=i.prototype,d.toString=function(){return i.toString()},h&&b.cache&&(f[h]=d),d},r=n.$each,s="break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield,undefined",t=/\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g,u=/[^\w$]+/g,v=new RegExp(["\\b"+s.replace(/,/g,"\\b|\\b")+"\\b"].join("|"),"g"),w=/^\d[^,]*|,\d[^,]*/g,x=/^,+|,+$/g,y=/^$|,+/;e.openTag="{{",e.closeTag="}}";var z=function(a,b){var c=b.split(":"),d=c.shift(),e=c.join(":")||"";return e&&(e=", "+e),"$helpers."+d+"("+a+e+")"};e.parser=function(a,b){a=a.replace(/^\s/,"");var c=a.split(" "),e=c.shift(),f=c.join(" ");switch(e){case"if":a="if("+f+"){";break;case"else":c="if"===c.shift()?" if("+c.join(" ")+")":"",a="}else"+c+"{";break;case"/if":a="}";break;case"each":var g=c[0]||"$data",h=c[1]||"as",i=c[2]||"$value",j=c[3]||"$index",k=i+","+j;"as"!==h&&(g="[]"),a="$each("+g+",function("+k+"){";break;case"/each":a="});";break;case"echo":a="print("+f+");";break;case"print":case"include":a=e+"("+c.join(",")+");";break;default:if(/^\s*\|\s*[\w\$]/.test(f)){var l=!0;0===a.indexOf("#")&&(a=a.substr(1),l=!1);for(var m=0,n=a.split("|"),o=n.length,p=n[m++];m<o;m++)p=z(p,n[m]);a=(l?"=":"=#")+p}else a=d.helpers[e]?"=#"+e+"("+c.join(",")+");":"="+a}return a},"function"==typeof define?define(function(){return d}):"undefined"!=typeof exports?module.exports=d:this.template=d}();

第二步:自定义开合标签


        template.config('openTag', '((');
        template.config('closeTag', '))');

第三步:写入模板内容

<script type="text/html">
<script id="products_template" type="text/html">
        <ul>
            ((each products as item))
            <li class="hover_preview">
                <div data-value="((item.price))" data-id="((item.id))" class="find-item"></div>
                <div class="img">
                    <img src="{{ STEAM_PRODUCT_IMG_URL }}((item.product__icon_url))">
                    <span class="bs">((item.name))</span>
                </div>
                <div class="price">$((item.price))</div>
                <div class="title" style="background-color:#((item.color))">((item.name))|((item.exterior))</div>
                <!--preview-->
                <div class="prw">
                    <div class="tt">((item.name))</div>
{#                    <div class="dsc">((item.name))</div>#}
                    <div class="im">
                        <img src="{{ STEAM_PRODUCT_IMG_URL }}((item.product__icon_url))">
                    </div>
                    <div class="am">{% trans 'Wear' %}:((item.exterior))</div>
{#                    <div class="star">#}
{#                        <img src="{{ MS_STATIC_URL }}images/ic-start.png" width="33" height="35">#}
{#                        <img src="{{ MS_STATIC_URL }}images/ic-start.png" width="33" height="35">#}
{#                        <img src="{{ MS_STATIC_URL }}images/ic-start.png" width="33" height="35">#}
{#                        <img src="{{ MS_STATIC_URL }}images/ic-start.png" width="33" height="35">#}
{#                    </div>#}
                    <div class="isp">
{#                        <a href="#">Inspect</a>#}
                        <span>$((item.price))</span>
                    </div>
                </div>

            </li>

            ((/each))
        </ul>
    </script>
</script>

第四步:使用模板

function query_product(filters) {
            $.getJSON('/inventory', filters, function (data) {
                if (data['succ']) {
                    var html = template('products_template', {'products': data['product_list']});
                    max_page = data['max_page'];
                    _products_show.html(html);
                    if(max_page>1){
                        $('#next').show();
                    }

if 使用:

 <span>
                                    ((if item.currency != "$" ))
                                       (( item.symbol ))(( item.currency)) (( item.cash_amount )) ( (( item.symbol ))$(( item.usd_amount )) )
                                    (( else ))
                                        (( item.symbol ))(( item.currency ))(( item.usd_amount  ))
                                    ((/if ))
                                    </span>

 

© 著作权归作者所有

共有 人打赏支持
猿神出窍
粉丝 15
博文 161
码字总数 57239
作品 0
沙坪坝
项目经理
nandy007/exmobi-lite

#ExMobi Lite ExMobi Lite框架是用于UIXML中的类似于jQuery的JS框架,用法为$(selector)。 使用时需引用core.js(核心类)和template.js(artTemplate的简洁语法,用于数据注入,如需使用原生...

nandy007 ⋅ 2015/09/28 ⋅ 0

移动应用 JS 框架--ExMobi Lite

ExMobi Lite 框架是用于UIXML中的类似于jQuery的JS框架,用法为$(selector)。 使用时需引用core.js(核心类)和template.js(artTemplate的简洁语法,用于数据注入,如需使用原生语法请引用t...

nandy007 ⋅ 2015/08/05 ⋅ 0

高性能JavaScript模板引擎template.js原理解析

artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro tmpl的25/32倍(性能测试);artTemplate的模板还...

webmirror ⋅ 2017/11/29 ⋅ 0

【JavaScript】对Ajax生成节点的JS模板化

在《【JavaScript】兼容IE6的JS模板化》(点击打开链接)和《【jQuery】利用jTemplates实现兼容IE6的jQuery模板化》(点击打开链接)我曾经提到如何分别在javascript和jquery完成前端模板化,...

yongh701 ⋅ 2017/11/14 ⋅ 0

学习使用templete.js

官网: https://github.com/yanhaijing/template.js 相关链接 BaiduTemplate artTemplate Juicer handlebarsjs Jade...

安小乐 ⋅ 2016/12/19 ⋅ 0

art-template 模板定义变量并更改变量值 不让其输出显示

在使用art-template.js出现如下的场景: 比如,循环体外面定义变量,并且在循环体内改变变量的值 但我又不想让其显示出来。 那我们一步一步的来实现以上的场景 看看会出现什么神奇的地方。 ...

qq_33399709 ⋅ 02/03 ⋅ 0

玩转编程语言:构建自定义代码生成器

在真实的软件开发过程中,无论使用何种编程开发语言,都不可避免的会遇到代码重复的问题。如何处理重复的问题,可以选择情怀(手动再敲一遍),也可以选择 Copy-to-Copy ,或者选择代码生成器...

RiboseYim ⋅ 2017/12/22 ⋅ 0

OSChina 技术周刊第二十期 —— 使用 Docker 搭建 Java Web 运行环境

每周技术抢先看,总有你想要的! 移动开发 【软件】移动端web框架 Frozen UI 【博客】Android各种Adapter的用法 服务端开发/管理 【翻译】2014 Docker 的竞争随即而来 【翻译】Docker 和 PI...

OSC编辑部 ⋅ 2015/02/01 ⋅ 2

使用template.js加载后端数据

1.在项目中引入template.js文件。 2.获取到后端接口地址等于号后面的字符串,在需要引入后端数据的div中添加id,使它的id=该字符串con。例如:http://120.77.240.194/youyou/app/index.php?m...

kitty1116 ⋅ 05/27 ⋅ 0

handlebars 安装erro

handlebars 安装: 1、npm 2、npm install -g handlebars(后面可以加@3.0.1版本号) 3、handlebars public/js/template > public/js/template.js 在相应目录进行预编译 事先确定你的电脑上已经...

浮世微凉 ⋅ 2015/11/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 今天 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部