前端常用插件之art-template模板引擎
前端常用插件之art-template模板引擎
最近，发现一个插件——渲染动态HTML页面的利器，个人觉得有必要与大家分享一下，它就是art-template模板引擎。
1. 准备环境：
① Bootstrap文件：bootstrap.min.css和bootstrap.min.js
② jQuery文件：jquery-1.11.3.min.js
③ Template文件：template.min.js
这里文件网上都有（尽量用最新版本），大家可以自行下载。
2. 代码实现：
需求：修改用户信息。
Html代码：
<!DOCTYPE html>
<head>
<title>修改用户信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="updateUser" style="width: 510px;">
<h3 style="text-align: center;margin-bottom: 30px;">修改用户信息</h3>
<form id="update-user-frm" class="form-horizontal"></form>
</div>
<!-- 修改用户信息template -->
<script type="text/html" id="update-user-tpl">
<div class="control-group">
<div class="control-label">用户名：</div>
<div class="controls text-nowrap">
<input type="text" name="loginName" value="{{userInfo && userInfo.loginName}}" placeholder="请输入用户名" autocomplete="off" />
</div>
</div>
<div class="control-group">
<div class="control-label">密码：</div>
<div class="controls text-nowrap">
<input type="text" name="pwd" value="{{userInfo && userInfo.pwd}}" placeholder="请输入密码" autocomplete="off" />
</div>
</div>
<div class="control-group">
<div class="control-label">角色：</div>
<div class="controls text-nowrap">
{{each roles as role i}}
<label class="radio">
<input type="radio" value="{{role.id}}" name="roleIds"/> {{role.name}}
</label>
{{/each}}
</div>
</div>
<button type="button" class="save-user" style="margin-left: 180px;">保存</button>
</script>
<!-- 引用的js文件 -->
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<!-- artTemplate -->
<script src="./js/template.min.js"></script>
<script src="./js/updateUser.js"></script>
</body>
</html>
Js代码：
(function(){
// 渲染"修改用户信息"页面
updateUser();
function updateUser() {
var userInfo = {
'loginName': '张三',
'pwd': '123456'
};
var roles = [
{id: '1', name: '普通用户'},
{id: '2', name: '开发管理员'},
{id: '3', name: '测试管理员'},
{id: '4', name: '超级管理员'},
{id: '5', name: '业务管理员'}
];
var updateUserHtml = template('update-user-tpl', {userInfo: userInfo, roles: roles});
$("#update-user-frm").html(updateUserHtml);
}
}());
运行结果：(直接在浏览器打开updateUser.html)
3. art-template功能介绍：
（1）页面代码模板：
从上面代码可知，html里面定义了一个template模板：<script type="text/html" id="update-user-tpl">......</script>，这样在js文件里面调用template的方法template(id, param)，就可以渲染模板页面，然后，将渲染好的模板页面添加到想要放的html页面里面，即$("#update-user-frm").html(updateUserHtml);
template(id, param)方法，它有两个参数：
id——template模板ID，标识；
param——template模板动态渲染对象参数，可以没有，是一个obj对象，可以通过key-value的方式传递多个属性参数；
（2）基本运算操作：
上面只使用了一种类似for循环：{{each roles as role i}}{{/each}}
这里，roles是数组对象，role是数组里面的单个对象，i是数组索引。