art-template模板渲染HTML
该方法的核心思想就是将json数据传入按照art-template模板编写模板中去。
1> 引入js文件
<script src="./js/template-web.js" type="text/javascript" charset="utf-8"></script>
2> 准备json对象
例如: var obj1 = {teams:[]};
var obj2 = {arr:[a,b,c,d,e]};
要求:后台服务器fastjson帮助我们将需要展示的数据,转换成json字符串
能够看到json数据
3> 制定模版
<script id="模版的唯一标识" type="text/html">
/*模板例子如下*/
{{a}}
{{b}}
{{c}}
在这个里面制定模板
</script>
<template id="模板的唯一标识">
/*模板例子如下*/
{{a}}
{{b}}
{{c}}
在这个里面制定模板
</template>
4> 渲染
<script type="text/javascript">
/*找到你想要操作的块*/
var showDiv = document.querySelector("#id选择器");
//template(模版的id,json格式的对象);
/*在那个块中键入*/
showDiv.innerHTML = template("模版的唯一标识", json对象名);
</script>
// 基于模板名渲染模板
template(filename, data);
filename: 对于模板的script标签的id;
data: js获取的数据(一般是后端返回的序列化json字符串)
5> 常用语句
输出
{{value}} // 目前最常见的双花括号数据绑定
{{data.key}} // 对象点方式
{{data['key']}} // 另外一种对象处理方式
{{a ? b : c}} // 三元运算
{{a || b}} // 或运算 防止 undefined 报错
{{a + b}} // 并列输出
{{$data['list']}}
if 选择
{{if flag == '1'}}
展示的内容
{{else if flag == "2"}}
展示的内容
{{else}}
展示的内容
{{/if}}
循环
注意:
target 支持 array 与 object 的迭代,其默认值为 $data。
$value 与 $index 可以自定义:{{each target val key}}。
-- stuArray 是json中属性名
-- 没有设置别名的时候 {{$index}} 索引 {{$value}}获取数组中值
-- stu是别名,可以修改
-- index 数组的索引,从0开始
{{each stuArray stu index}}
{{stu}}
{{stu.name}}
{{index}}
{{/each}}
-- json属性的值,就是一个值,不是对象,也不是数组
{{json的属性名}}
打印 print
<script>
var obj={ a: 'hello', b: '--world', c: '--!!!'};
</script>
<template id="mb1">
{{print a b c}}
</template>
转义问题
<template id="mb">
显示文本: {{userImg}}
<hr>
显示图片: {{@userImg}} 或者 {{#userImg}}
</template>
<script type="text/javascript">
var obj={userImg:"<img src='./img/1.jpg'>"}
document.querySelector(".show").innerHTML=template("mb",obj);
</script>
模板中可以嵌入子模版
{{include '另外一个模版的id' 参数值}}
<template id="template1">
<ul class="artists">
{{each artists singer index}}
<li>
{{index+1}}
<br>
{{singer.name}}
<br>
{{include 'mb' singer}}
</li>
{{/each}}
</ul>
</template>
<template id="mb">
<!-- <img src="{{img1v1Url}}" width="80px"> -->
{{id}}
</template>
自定义过滤器
// 定义变量
template.defaults.imports.log = console.log;
使用变量
<% $imports.log('hello world') %> == console.log('hello world')
自定义过滤器定义函数
template.defaults.imports.方法名 = function ( 参数 ) {
}
然后在模版中使用这个过滤器
<span>{{json属性名 | 自定义过滤器方法名}}</span>
<span>{{参数1|自定义过滤器方法名:参数2,参数3,... }}</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="show">
</div>
<script src="./js/template-web.js" type="text/javascript" charset="utf-8"></script>
<template id="k1">
{{each sexList sex}}
{{sex|sexinfo}} <br>
{{/each}}
</template>
<script type="text/javascript">
//自定义验证器在,js代码中写
template.defaults.imports.sexinfo=function(sex){
return sex==1?"男":"女";
}
//定义一个json对象
var jsonObj={"sexList":[1,0,1,1,1,0]};
//渲染模板
document.querySelector(".show").innerHTML=template("k1",jsonObj);
</script>
</body>
</html>
定义变量
{{set temp = data.sub.content}}
新加:(使用jquery函数库可以帮助我们快速的写出模板)
下面是一个例子(在jsp上写出用户列表界面)
下面是用户界面。在页面上显示出来的东西都用下面的html代码编写。
tempalte模板正餐时间:
1.首先,我们先引入jquery模板和tempalte模板。
2.其次,在用页面加载完成之后调用显示方法。其中
<script type="text/javascript">
function showListData() {
// 参数一:url 参数二:页面传递的servlet的值 参数三:回调函数,servlet传递给页面的值
//参数四:返回的数据类型
//$.post的意思是访问servlet的post方法。
$.post(
//参数一:url
"user?type=userList",
//参数三:回调函数 data是servlet传给页面的json数据
function(data) {
//被渲染的数据
var jsonObj =
//json的标准模式 { key:value }; 通过key属性值可以查询到value
//也可以称之为建立一个引用userList指向有servlet传过来的数据data;
{userList : data};
//通过标签名定位到 (想要写数据的块或者是表中)
//然后利用jquery封装的html方法渲染template模板
$("#user_table>tbody").html(
// 是根据模板名来渲染模板。 template("模板名或者是模板id",servlet传过来json对象)
template("userList_template", jsonObj))
},
//参数四:返回的数据类型
'json');
}
</script>
3.编写template模板:
<script id="userList_template" type="text/html">
<!--调用each方法遍历userList (上面的json对象,再给它一个自定名,最后如果有需要还可以
给它定义一个索引)-->
{{each userList user}}
<tr>
<td>{{user.userId}}</td>
<td>{{user.userName}}</td>
<td>{{user.userPwd}}</td>
<td>{{user.userPhone}}</td>
<!-- 在使用src指向时必须添加双引号“”还有json格式的{{}} -->
<td><img src="{{user.userImg}}" width="50px" ></td>
<td>
{{if user.userFlag==0}}
普通用户
{{else}}
管理员
<!--千万不要忘记在if语句结尾时给它添加{{/if}} -->
{{/if}}
</td>
<td>
<a href="javascript:void(0);" id="uploadbtn">修改</a>
<a href="javascript:void(0);" id="uploadbtn">删除</a>
</td>
</tr>
<!--千万不要忘记在each语句结尾时给它添加{{/each}} -->
{{/each}}
</script>