template
项目介绍
只是对artTemplate的一个补充,跳过artTemplate渲染模板的操作
项目地址
使用说明
data-* 说明
tpl主模板
includes//引用的子模板 必定是远程模板
remote//远程加载数据
onbefore//发起远程请求前响应
onafter//数据请求成功后响应
onrender//模板准备渲染 可修改数据
onload,//模板渲染完成之后
storage//数据key 本地(方法)或者缓存
others//其他数据 本地(方法)或者缓存
模板文件中可使用context数据对象
模板文件编写方式与artTemplate模板写法一致
$.fn.template.globalSettings //可配置模板默认参数或者全局回调
$.fn.template.globalSettings.base={tpl:'',remote:''} 可配置远程模板以及远程数据访问域名
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="art/template.js"></script>
<script type="text/javascript" src="js/jquery.template2.js"></script>
<script type="text/javascript">
$.fn.template.globalSettings = {
storage: 'ns',
base: {},
onbeforerender: function () {
console.log("beforerender")
},
onchange: function () {
console.log('change')
}
}
var data = {a:1, b:222}
// localStorage.setItem("abc", JSON.stringify({dd:{a:1, b:3}}))
function onrender(){
console.log('onrender',arguments)
}
function onload() {
console.log('onload', arguments)
}
function onbefore(){
console.log("before", arguments)
}
template.helper('stringify', JSON.stringify)
$(function () {
$("#main").template()
})
</script>
</head>
<body>
<script id="tpl" type="text/html">
{{data.a*data.b}}
</script>
<div id="main"
data-tpl="admin.html"
data-includes="admin1.html"
data-remote="data.json"
data-storage="abc"
data-others="a"
data-onbefore="onbefore"
data-onrender="onrender"
data-onload="onload">
</div>
</body>
</html>
来源:CSDN
作者:processengine
链接:https://blog.csdn.net/processengine/article/details/81510092