准备材料
1. jquery.js
2.jquery.tmpl.min.js 可以下载到本地，也可以用链接
3.详细demo
先上图，今天我们要烹饪的美食之一
哈哈
开始烹饪 (这里是烹饪二代码)
<body>
<h2>小二，上菜</h2>
<div class="pan"></div><!-- 准备一个锅 -->
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js'></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script><!-- 必备火候 -->
<script type="text/javascript">
$(function(){
/*菜单列表*/
var menu=[{menu_name:'焖鸡翅',food_material:'鸡翅膀,青椒,姜丝',method:'炒',smell:'香辣美味'},{menu_name:'烧白菜',food_material:'小白菜,蘑菇,虾米',method:'炒',smell:'色香味美'},{menu_name:'蛋炒饭',food_material:'鸡蛋,珍珠米饭,菜',method:'炒',smell:'回味无穷'},{menu_name:'炒萝卜',food_material:'红萝卜,虾,五花肉',method:'炒',smell:'色香味美'},
]
// 假设是师傅教徒弟烹饪的模板
var template='<li><span>${menu_name}:</span><span>${food_material}</span><span>${method}</span><span>${smell}</span></li>'
//徒弟根据师傅给的样板把menu里面的菜单依次烹饪，再到上面的锅里看看，当然是一道道美食啦
$.tmpl(template,menu).appendTo('.pan')})
</script>
</body>
烹饪一过程
烹饪二过程
烹饪完毕
锅里美食/运行结果
采用不同的烹饪方式，都可以烹饪出美食吧，至于用哪一种，就看你喜欢哪种了
拓展原理：
jQuery.tmpl( template [, data] [, options] ) Returns: jQuery
官方解释【ps：我的解释(看烹饪二)】
template
The HTML markup or text to use as a template.
【代码27行/我们假设是师傅教徒弟做菜的样板】
data
The data to render. This can be any JavaScript type, including Array or Object.
【代码19-25行/假设是需要烹饪的菜单列表】
options
An optional map of user-defined key-value pairs. Extends the tmplItem data structure, available to the template during rendering.
用jquery tmpl()传递数据渲染页面的优点：
兼容性好，兼容各种主流浏览器
容易学，上手快
渲染工作放在前端，减少服务端开销
哈哈反正我饿了
后记：我始终觉得web前端开发是一门艺术，艺术来源于生活，希望通过走近生活的方式让你我更好的理解前端。后续更精彩，敬请期待，也欢迎纠错和改正
网友评论