art-template辅助函数和子模板

2018-06-24 01:20:34来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D08c992b4e9c4b7453494b71efffd1e78%2Fba14695c10385343f96e93bc9113b07ecb80884c.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%3A%2F%2Fec4.images-amazon.com%2Fimages%2FI%2F415ZJgXDNEL._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%3A%2F%2Fi1.w.hjfile.cn%2Fdoc%2F201111%2Ftom%2520sawyer11530.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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:3D-爱心

下一篇:css 页面特殊显示效果