$.tmpl 简单 demo

352328759

于 2021-07-13 16:01:39 发布

阅读量234

点赞数 1

分类专栏： Jquery 介绍文章标签： tmpl jquery

本文链接：https://blog.csdn.net/u013970232/article/details/118702351

版权

介绍同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

Jquery

11 篇文章 0 订阅

订阅专栏

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

352328759

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
$.tmpl 简单 demo

jquery.tmpl.js 其实已经是很老旧的东西了, 奈何项目用得到, 最近又重新捡起来用其实老东西也没什么不好, 起码引入即用; 功能单一也是功能明确最近用到 {{tmpl}}, 顺理成章也涉及到传值, 作用域等问题. 遂写下点笔记, 便于以后使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jquery.tmpl 简单 demo</title&
复制链接

扫一扫