jquery.tmpl.js 其实已经是很老旧的东西了, 奈何项目用得到, 最近又重新捡起来用
其实老东西也没什么不好, 起码引入即用; 功能单一也是功能明确
最近用到 {{tmpl}}, 顺理成章也涉及到传值, 作用域等问题. 遂写下点笔记, 便于以后使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.tmpl 简单 demo</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<style type="text/css">
* {
outline: 1px solid red;
padding: 10px 10px;
}
</style>
</head>
<body>
<div>
<div>$data 有点像 this</div>
<div>{{= $data.swq}} 同 {{= swq}}</div>
<div>.tmpl() 传入的数据如果是数组, 自带遍历</div>
<div>模板里可以调全局变量, 全局方法; .tmpl 调用位置的变量不能用</div>
<div>{{tmpl(数据) '#子模板'}} 数据可以是对象, 方法, 变量等</div>
<div>子模板可以调用全局变量和父模板传下来的数据</div>
</div>
<div id="swq"></div>
<script id="template1-tmpl" type="text/x-jquery-tmpl">
<h1>父模板</h1>
<div>val2<span>{{= val2}}</span></div>
<div>$data.val2<span>{{= $data.val2}}</span></div>
<div>val2 同 $data.val2</div>
<br />
<div>fun2(val2){{= fun2(val2)}}</div>
<div>arr2{{= arr2}}</div>
<br />
<div>val1{{= val1}}</div>
<div>arr1{{= arr1}}</div>
<div>fun1(val1){{= fun1(val1)}}</div>
<br />
<div>传入 $data 相当于把当前数据全部传入</div>
<div>{{tmpl($data) '#template2-tmpl'}}</div>
<br />
<div>传入 {} 相当于不传数据</div>
<div>{{tmpl({}) '#template2-tmpl'}}</div>
<br />
<div>什么都不传 相当于传入 $data</div>
<div>{{tmpl() '#template2-tmpl'}}</div>
</script>
<script id="template2-tmpl" type="text/x-jquery-tmpl">
<h1>子模板</h1>
<div>{{= arr1}}</div>
<div>
{{if arr2}}
<!---->
{{= arr2}}
<!---->
{{else}}
<!---->
没传 arr2
<!---->
{{/if}}
</div>
</script>
<script type="text/javascript">
var val1 = "全局变量 val1"
var arr1 = ["全局数组", "arr1"]
function fun1(item) {
console.log(item)
return "全局方法 fun1"
}
$(document).ready(function() {
var val2 = "传入变量 val2"
var arr2 = ["传入数组", "arr2"]
function fun2(item) {
console.log(item)
return "传入方法 fun2"
}
var html = $("#template1-tmpl").tmpl({
val2,
arr2,
fun2
})
html.appendTo("#swq");
})
</script>
</body>
</html>
end
