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
art-template辅助函数和子模板相关推荐
- js模板引擎art template数组渲染的方法
转载:js模板引擎art template数组渲染的方法 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调 ...
- 子模板继承父模板示例_模板设计模式示例
子模板继承父模板示例 本文是我们名为" Java设计模式 "的学院课程的一部分. 在本课程中,您将深入研究大量的设计模式,并了解如何在Java中实现和利用它们. 您将了解模式如此重 ...
- Helm 3 完整教程（二十一）：Helm 创建和引用子模板
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- ue4商城资源 Car Configurator Template 汽车配置器模板
ue4商城资源 Car Configurator Template 汽车配置器模板 ue4商城资源 Car Configurator Template 汽车配置器模板 Unreal Engine虚幻游 ...
- 模板---使用el选项指定模板/使用template选项指定内联模板/使用template选项指定独立模板/使用render选项指定要挂载的模板
使用el选项指定模板 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- NodeJS_08_art-template子模板与模板继承_MongoBooster_express-session_三大类中间件_全局错误处理
NodeJS七天课程学习笔记_第8天 Blog综合案例 Blog 综合案例 (包含注册.登录.修改密码.注销.发布.分页列表.评论.个人中心.上传头像等) 课程内容概要: 1. 介绍art-templ ...
- Template 基础篇-函数模板
====================================================|| 欢迎讨论技术的可以相互加微信:windgs (请备注csdn+xx职业) ======== ...
- Vue.js 使用script或template标签创建组件模板内容
为了使HTML代码和JavaScript代码是分离的,便于以后的阅读和维护,我们可以并建议使用<script>或<template>标签创建组件模板内容. <!DOCTY ...
- ansible常用模块之 -- template模块 – 将文件模板输出到远程服务器
ansible常用模块之 -- template模块 – 将文件模板输出到远程服务器 template模块 – 将文件模板输出到远程服务器 一.摘要 二.参数 三.示例 template模块 – 将文 ...
最新文章
- java---实现闹钟的基本功能
- 第二节 MATLAB中图像数据导入、导出和转换
- C++迭代器失效的几种情况总结
- java智能提示_【Java】智能提示的设置
- 各种机器学习的应用场景分别是什么
- AC日记——潜伏者 洛谷 P1071 （模拟）
- 【综述阅读】Ad hoc网络路由相关的几篇综述
- 311 复制文件的异常处理
- Python openpyxl文档
- Python代码转EXE程序
- 文件同步工具Unison
- 计算机主机的拆卸步骤,电脑清灰教程：电脑主机怎么清理灰尘？台式电脑主机清理灰尘教学...
- android 谷歌地图显示空白,.android谷歌地图显示空白网格与缩放选项
- 中国有句俗语叫“三天打鱼两天晒网”，某人从1990年1月1日起开始“三天打鱼两天晒网”，即打鱼三天，然后再晒网两天。问这个人在以后的某一天中是在打鱼还是在晒网
- 类和对象3：组合和混入
- Cocos2d-x 3.x游戏开发之旅
- 借了你的爱，用我一辈子来还
- matlab体会,Matlab心得体会
- 随便学学Python-day7-字典和集合
- 使用微博自动记录俯卧撑个数