免费网站源代码,怎么制作网站教程,体育彩票网站开发方案,网站建设制作价格低分类信息art-template 前端使用
用途#xff1a;主要用来处理数据和优化性能#xff0c;与其他的一些模块化处理数据的插件相比#xff0c;art-template处理性能好
不废话#xff0c;上代码
1.art-template基本语法使用 script srctemplate.js/script主要用来处理数据和优化性能与其他的一些模块化处理数据的插件相比art-template处理性能好
不废话上代码
1.art-template基本语法使用 script srctemplate.js/script //id为模块的名称 //语法全部为双标签 {{}} 里面为变量 script idtemplate typetext/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 idweb typetext/html a href{{url}}{{name}}/a br /script script idbook typetext/html img src{{url}} alt br div{{name}}/div /script script idrecommend typetext/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?imagequality80sizeb9999_10000sec1484047575704di3bc7d59698a2aaeb917598e563aa749eimgtype0srchttp://imgsrc.baidu.com/forum/w%3D580/sign08c992b4e9c4b7453494b71efffd1e78/ba14695c10385343f96e93bc9113b07ecb80884c.jpg }, { type : web , name : google , url : https://google.com }, { type : book , name : 围城 , url : https://timgsa.baidu.com/timg?imagequality80sizeb9999_10000sec1484047692883diedf1860dc373863422ccdfecd43c1057imgtype0srchttp://ec4.images-amazon.com/images/I/415ZJgXDNEL._SL500_AA300_.jpg }, { type : book , name : 汤姆索亚历险记 , url : https://timgsa.baidu.com/timg?imagequality80sizeb9999_10000sec1484047764487die6853f746fe6ba15b34266592b8501acimgtype0srchttp://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
