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%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
art-template辅助函数和子模板的更多相关文章
- art template前端模板引擎
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
- Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)
Vue组件通讯 Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通 ...
- js 模板引擎 -Art Template
一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- JavaScript模板引擎artTemplate.js——引入子模板
之前的例子都是单一结构的对象,如果遇到复杂对象结构,我们可以通过引入子模板来实现html的渲染. 依旧以之前的数据作为例子: <div id="content">< ...
- 在引用的laravel的@include子模板中传递参数
调用传参: @include("message",['msg'=>'中国']) 在message子模板中调用msg的值: {{msg}}
- artTemplate子模板include
art.Template:https://github.com/aui/art-template 下面来实现利用模版来实现递归调用生成tree <script type="text/h ...
- ZendFramework-2.4 源代码 - 关于MVC - View层 - 在模板内渲染子模板
<?php // 方式一: // 1.在模板内直接编写如下内容即可 $viewModel = new ViewModel(); $viewModel->setTemplate('album ...
- Template 基础篇-函数模板(待看
Template 基础篇-函数模板 Template所代表的泛型编程是C++语言中的重要的组成部分,我将通过几篇blog对这半年以来的学习做一个系统的总结,本文是基础篇的第一部分. Template ...
- WordPress子模板继承
很多时候我们不想重写模板,而是想在某个模板的基础上进行修改,那么这个时候我们就需要用到模板继承技巧. 子主题开发 style.css 是必须的文件,只需要新增 Template: 父模板的文件夹名
随机推荐
- Hello AS400-Cobol
因工作转换,进入金融行业,需要接触AS400-Cobol 在C#和Java的技术栈中再增加一笔,技术只是工具,无关乎新旧,获得编程思想和经验是无价的.
- JAVA实现QRCode的二维码生成以及打印
喜欢的朋友可以关注下,粉丝也缺. 不说废话了直接上代码 注意使用QRCode是需要zxing的核心jar包,这里给大家提供下载地址 https://download.csdn.net/download ...
- postgresql-递增uuid优点
递增uuid的优点: https://blog.2ndquadrant.com/on-the-impact-of-full-page-writes/ 减小wal生成
- C++ 操作符、局部 全局变量及自动转换原则
1.&:表示与操作,eg:2&1=2&&:表示and操作,eg:1&&0=0|:表示或操作,eg:2|1=3||:表示or操作,eg:1||0=12.全 ...
- Intellij IDEA 编译等级与源代码等级不一致问题
错误:Error:java: javacTask: source release 1.7 requires target release 1.7 原因:生成class字节码的java版本,低于了源代码 ...
- flex布局中transform出错
在flex布局下,若应用transform 的动画的子元素没有使用进行定位,则动画过程中,子元素将相对display:flex的元素进行static定位 动画结束后位置正常: 修复代码只需要posit ...
- Java中的日志管理
日志是应用程序运行中不可缺少的一部分,JAVA中有很多已经成熟的方案,尽管记录日志是应用开发中并不可少的功能,在 JDK 的最初版本中并不包含日志记录相关的 API 和实现.相关的 API(java. ...
- 整理学习ASP.NET MVC的资源
网站 http://www.asp.net/mvc http://stackoverflow.com/questions/tagged/asp.net-mvc+asp.net-mvc-4?sort=n ...
- Android之apk优化
公司的apk越做越大...作为一个有追求的程序员,我觉得有必要给apk瘦身了... 优化之前,先来分析一下apk结构,下面附上一张apk结构图: apk结构.png 由于我这个项目集成了百度地图.百度 ...
- 全网最详细的再次或多次格式化导致namenode的ClusterID和datanode的ClusterID之间不一致的问题解决办法(图文详解)
不多说,直接上干货! java.io.IOException: Incompatible clusterIDs in /opt/modules/hadoop-2.6.0/data/tmp/dfs/da ...