首页 > 代码库 > JsRender系列demo(2)多模板-template
JsRender系列demo(2)多模板-template
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript" src="http://www.mamicode.com/scripts/jquery.js"></script><script type="text/javascript" src="http://www.mamicode.com/scripts/jquery-ui.js"></script><script type="text/javascript" src="http://www.mamicode.com/scripts/jsrender.js"></script><link href="http://www.mamicode.com/scripts/demos.css" rel="stylesheet" /></head><body><button id="switchBtn">展示详细内容</button><br /><table><tbody id="movieList"></tbody></table><script type="text/javascript">//数据来源var movies = [{ name: "Cupid", Birthday: "1998-12-12", nation: "中国" },{ name: "陌上花开", Birthday: "1999-23-234", nation: "美国" },{ name: "Tina", Birthday: "1976-34-13", nation: "法国" }];//两个模板$.templates({titleTemplate: "<tr><td colspan=3>{{>name}}</td></tr>",detailTemplates: "<tr><td>姓名：{{>name}}</td><td>出生日期：{{>Birthday}}</td><td>国籍：{{>nation}}</td></tr>"});var details = true;//多模板function switchTemplates() {var html, button = $("#switchBtn");details = !details;if (details) {//第一个木板button.text("展示姓名");html = $.render.detailTemplates(movies);} else {//第二个某班button.text("展示详细信息");html=$.render.titleTemplate(movies);}$("#movieList").html(html);}$("#switchBtn").click(switchTemplates);switchTemplates();</script> </body></html>
JsRender系列demo(2)多模板-template
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。