art-template辅助函数和子模板

art-template 前端使用

用途:主要用来处理数据和优化性能,与其他的一些模块化处理数据的插件相比,art-template处理性能好

不废话,上代码 

1.art-template基本语法使用

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

  //id为模块的名称

  //语法全部为双标签  {{}}  里面为变量

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

  {{if films.length == 0}}
  <p>没有推荐的电影给您</p>
  {{else}}
  <h1>{{title}} : {{films.length}} </h1>
  <ul>
  {{each films as film index}}
  <li>
  {{film.name}}
  <del>{{film.normalPrice }}</del>
  <span>{{film.nowPrice }}</span>
  <br>
  首映日期:{{film.time}}
  </li>
  {{/each}}
  </ul>
  {{/if}}  

模拟数据:  

var data =
{
title : '推荐的电影' ,
films :
[
{
name : '湄公河公案' ,
normalPrice : 40 ,
nowPrice : 29.9 ,
time : '2016-6-6'
},
{
name : '重返二十岁' ,
normalPrice : 26 ,
nowPrice : 13 ,
time : '2016-12-12'
},
{
name : '长城' ,
normalPrice : 42 ,
nowPrice : 39.9 ,
time : '2017-12-25'
},
{
name : '倩女幽魂7' ,
normalPrice : 80 ,
nowPrice : 80 ,
time : '2018-8-8'
},
{
name : '程序员纪录片--单身汪的成长' ,
normalPrice : 1000 ,
nowPrice : 2000 ,
time : '2020-20-20'
}
]
}

  此处获取数据,并将数据交给template进行处理

  var html = template('template',data);
  渲染页面
  document.body.innerHTML = html

</script>

 

2.辅助函数,其实就是对一些数据做一些处理

price为辅助方法的名字    price_data为处理的数据

方法: template.helper('price',function(price_data){

  //处理的内容

})

以以上代码为例,为film.normalPrice和film.nowPrice数据添加一个¥修饰符

template.helper('price',function(price_data){

  return '¥' price_data.toFixed(2)

})

在处理的数据处用  '| 方法名'

<del>{{film.normalPrice | price}}</del>
<span>{{film.nowPrice | price}}</span>

 

3.模板引入子模板

 不多说,上demo

<script id="web" type="text/html">
  <a href="{{url}}">{{name}}</a>
  <br>
</script>

<script id="book" type="text/html">
  <img src="{{url}}" alt="">
  <br>
  <div>{{name}}</div>
</script>

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

{{if items.length == 0}}
  <h1>抱歉,未找到推荐的相关内容</h1>
{{else}}
  <h1>{{title}}:{{items.length}}个</h1>

  {each items as item}}

  {{if item.type == 'web'}}
    {{include 'web' item}}
  {{else}}
    {{include 'book' item}}  //include用于引入子模块  'book'模块的id   item传递过去的数据
  {{/if}}
  {{/each}}
{{/if}}
</script>

再献上数据

var data =
{
title : '推荐的书籍和网站' ,
items:
[
{
type : 'web',
name : 'github' ,
url : 'https://github.com'
},
{
type : 'book' ,
name : '平凡的世界' ,
url : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484047575704&di=3bc7d59698a2aaeb917598e563aa749e&imgtype=0&src=http://imgsrc.baidu.com/forum/w%3D580/sign=08c992b4e9c4b7453494b71efffd1e78/ba14695c10385343f96e93bc9113b07ecb80884c.jpg'
},
{
type : 'web' ,
name : 'google' ,
url : 'https://google.com'
},
{
type : 'book' ,
name : '围城' ,
url : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484047692883&di=edf1860dc373863422ccdfecd43c1057&imgtype=0&src=http://ec4.images-amazon.com/images/I/415ZJgXDNEL._SL500_AA300_.jpg'
},
{
type : 'book' ,
name : '汤姆索亚历险记' ,
url : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484047764487&di=e6853f746fe6ba15b34266592b8501ac&imgtype=0&src=http://i1.w.hjfile.cn/doc/201111/tom%20sawyer11530.jpg'
},
]
}
var result = template('recommend',data) ;

document.body.innerHTML = result ;

 

再服务器使用art-template模块利用template引擎可实现项目模块化,具体。。。、

 

官方源码及文档:

https://github.com/aui/artTemplate

语法:

https://github.com/aui/artTemplate/wiki/syntax:simple

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368644.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微处理器 微型计算机系统,作业答案11微处理器微型计算机和微型计算机系统三者之间.DOC...

作业答案11微处理器微型计算机和微型计算机系统三者之间第1章 作 业 答案1.1 微处理器、微型计算机和微型计算机系统三者之间有什么不同?把CPU(运算器和控制器)用大规模集成电路技术做在一个芯片上,即为微处理器。微处理器加上一定数量的存储器和外部设备(或外部设备的接口)构…

C# 对轻量级(IoC Container)依赖注入Unity的使用

概述 Unity是一个轻量级的可扩展的依赖注入容器&#xff0c;支持构造函数&#xff0c;属性和方法调用注入。Unity可以处理那些从事基于组件的软件工程的开发人员所面对的问题。构建一个成功应用程序的关键是实现非常松散的耦合设计。松散耦合的应用程序更灵活&#xff0c;更易于…

为什么同步的StringBuffer从来都不是一个好主意

介绍 StringBuffer是用于可变字符串的同步类。 使其同步的主要问题是 它通常用作局部变量&#xff0c;因此使其同步只会使其变慢。 以多线程方式使用它从来不是一个好主意。 这个问题是开发人员认为使用StringBuffer的方法在不使用时本身就是线程安全的。 StringBuffer的问题…

大工20秋计算机组成原理在线作业2,大工14秋《计算机组成原理》在线作业2答案...

大工14秋《计算机组成原理》在线作业2单选题 判断题一、单选题(共 10 道试题&#xff0c;共 50 分。)1. 存储周期是指( )。A. 存储器的读出时间B. 存储器的写入时间C. 存储器进行连续读或写操作所允许的最短时间间隔D. 存储器进行连续读或写操作所允许的最长时间间隔正确答案&a…

css清除浮动

css设计浮动属性的主要目的&#xff0c;是为了实现文本绕排图片的效果。 一.浮动 当浮动一张图片或者其他元素时&#xff0c;浏览器会将浮动元素往上方推&#xff0c;直到它碰到父元素的内边界。后面的元素不再认为浮动元素在文档流中位于它的前面了&#xff0c;因为它就会占…

gitlab搭建配置;ssh配置;

1.centos7上搭建gitlab&#xff0c;过程略&#xff1b; 命令&#xff1a;gitlab-ctl [start] [stop] [restart] [reconfigure] [tail] 查看gtilab日志 [status] 查看gitlab运行状态信息 2.修改默认ip端口&#xff1a; vim /etc/gitlab/gitlab.rb &#xff1b; external_url h…

5月学习总结(Ant-Design,mustache,require.js,grunt)

一、Ant-Design学习 因为Ant-Design是基于React实现的&#xff0c;之前自己也学过一段时间的React&#xff0c;对React还是相对比较熟悉的&#xff0c;在学习Ant-Design也还不算吃力。 最开始是从源码看起&#xff0c;从最简单的Icon组件看的&#xff0c;然后连续看了几个组件就…

使用NoSQLUnit测试Spring Data Neo4j应用程序

Spring Data Neo4j是Spring Data项目中的项目&#xff0c;它提供了Spring编程模型的扩展&#xff0c;用于编写使用Neo4j作为图形数据库的应用程序。 要使用NoSQLUnit为Spring Data Neo4j应用程序编写测试&#xff0c;除了考虑Spring Data Neo4j在图形节点和关系中使用一种称为t…

家用计算机历史记录,教您如何查看电脑使用记录

很多朋友想查看自己之前使用过的文件或者文档来查询资料&#xff0c;或者是想看电脑是否被人使用过&#xff0c;但是&#xff0c;如何查看电脑使用记录呢&#xff1f;下面系统之家小编教大家查看电脑使用记录小技巧&#xff0c;不用担心找不到电脑使用记录。希望对大家有所帮助…

html5 图片上传 预览

<html><body><fieldset> <legend>测试</legend> <div class"form-group"> <div class"img-preview rl"> <form id"index_form1" name"index_form1" role"form" method"p…

使用selenium前学习HTML(3)— 属性

<!--HTML标签可以拥有属性&#xff0c;属性提供元素的更多的信息&#xff1b;属性总是以名称/值对的形式出现&#xff0c;比如&#xff1a;name"value"。属性总是在 HTML 元素的开始标签中规定。 --><!DOCTYPE html> <html lang"en"> &l…

k3 Bos开发百问百答

K/3 BOS开发百问百答 &#xff08;版本&#xff1a;V1.1&#xff09; K3产品市场部 目录 一、基础资料篇__ 1 【摘要】bos基础资料的显示问题_ 1 【摘要】单据自定义无法看到bos定义的基础资料_ 1 【摘要】在调出基础资料序时簿时&#xff0c;过滤出我需要的基础资料_ 1 【摘要…

计算机架构专业排名,全国大学计算机专业排名(转贴)

4 东北大学 A 081201计算机系统结构 081200计算机科学与技术 08工学5 西安交通大学 A 081201计算机系统结构 081200计算机科学与技术08工学6 复旦大学 A 081201计算机系统结构 081200计算机科学与技术 08工学7 中国科学技术大学 A 081201计算机系统结构 081200计算机科学与技术…

Spring MVC,Ajax和JSON第2部分–服务器端代码

在上一个博客中&#xff0c;我说过我将谈论Spring&#xff0c;Ajax和JSON&#xff0c;但是没有。 原因是我想使用&#xff08;很少&#xff09;可信的购物网站场景来设置场景。 在这种情况下&#xff0c;当用户单击“电子商务”页面链接时&#xff0c;服务器应用程序将加载目录…

Python模块学习之解决selenium的“can't access dead object”错误

问题描述 在python执行过程中&#xff0c;提示selenium.common.exceptions.WebDriverException: Message: TypeError: cant access dead object 原因 原因是代码中用到了frame,获取元素前需要切换到frame才能定位到元素&#xff0c;否则无法定位到元素 解决方法 在查找元素前加…

初中生学计算机网络应用怎么样,初中生读计算机网络技术专业怎么样?小编解答...

初中生读计算机网络技术专业怎么样?可以这样说&#xff0c;计算机网络技术专业在众多专业当中来说&#xff0c;也是一个发展得比较不错的专业&#xff0c;而且现在也有很多高职学校都开设有计算机网络技术专业&#xff0c;那么初中生读计算机网络技术专业怎么样?计算机网络技…

类的无参方法和Doc注释

一:Java Doc注释: 语法: /** *AccpSchool 类 *author JadeBird *version 1.0 2018/5/26 */ Java Doc是前Sun公司提供的一种技术,它能够从程序代码中抽取类,方法,成员等的注释,形成一个和源代码配套的API帮助文档(简答地说,就是介绍该类,类的方法和成员变量的文档). 因此只要在编…

html/css学习笔记(一)

盒子模型1.background 1.1background-colorbackground-image: url("");background-repeatbackground-size: &#xff08;x轴的比例 y轴的比例&#xff09;background-positionbackground-attachment:fixed;(背景图固定不滚动)1.2 复合写法background: color iamge po…

Spring MVC,Ajax和JSON第3部分–客户端代码

如果您一直关注有关Spring&#xff0c;Ajax和JSON的简短博客系列&#xff0c;那么您会回想起我到目前为止已经创建了一个Spring MVC Web应用程序&#xff0c;该应用程序显示一个表单&#xff0c;该表单允许用户选择一堆项目并向服务器提交购买请求。 然后&#xff0c;服务器用一…

[poj] 3090 Visible Lattice Points

原题 欧拉函数 我们发现&#xff0c;对于每一个斜率来说&#xff0c;这条直线上的点&#xff0c;只有gcd(x,y)1时可行&#xff0c;所以求欧拉函数的前缀和。2*f[n]1即为答案。 #include<cstdio> #define N 1010 using namespace std; int x,y,n,f[N],m;int read() {int a…