<!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="scripts/jquery.js"></script>

<script type="text/javascript" src="scripts/jquery-ui.js"></script>

<script type="text/javascript" src="scripts/jsrender.js"></script>

<link href="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的更多相关文章

  1. JsRender系列demo(6)-无名

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

  2. JsRender系列demo(5) for else

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. JsRender系列demo(3)-自定义容器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. JsRender系列demo(1)-insert-data

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. JsRender系列demo(9)自定义函数

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. JsRender系列demo(7)compline

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

  7. JsRender系列demo(4)-if else

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. Freemarker-2.3.22 Demo - No01_获取模板并直接输出

    package No01_获取模板并直接输出; import java.io.File; import java.io.FileOutputStream; import java.io.OutputS ...

  9. ECMall2.x模板制作入门系列之2（模板标签/语法）

    ECMall2.x模板制作入门系列之2(模板标签/语法) 今天给大家带来一个模板语法的教程.希望能为ECMall模板制作者提供一份参考资料.如有问题.建议和意见,欢迎提出. 在ECMall模板中,用& ...

随机推荐

  1. 济南学习 Day 3 T3 pm

    仙人掌(cactus)Time Limit:1000ms Memory Limit:64MB题目描述LYK 在冲刺清华集训(THUSC) !于是它开始研究仙人掌,它想来和你一起分享它最近研究的结果. ...

  2. bzoj 1006: [HNOI2008]神奇的国度

    这是个标准的弦图,但如果不知道弦图就惨了=_= 趁着这个机会了解了一下弦图,主要就是完美消除序列,求出了这个就可以根据序列进行贪心染色. 貌似这个序列很神,但是具体应用不了解…… 这道题为什么可以这么 ...

  3. adb连接不上手机

    昨天电脑重装了系统,今天打开之前的eclips工作环境,点击run as -> android application,一直报各种诡异的错误,总之就是连接不上手机. 其中包括 Adb conne ...

  4. <邮件服务postfix+mysql>MAIL第二篇

    环境:本服务是建立在第一篇的基础之上的,最好搭建好第一篇 玩此服务的前提是你的系统装好了msql和postfix服务. Postfix+mysql主要是把邮件服务的发与mysql结合使用.当然mysq ...

  5. wap网站seo如何优化呢？

    从事互联网的人员都知道移动互联网营销是一个大的趋势,但是要怎么去做恐怕还都一筹莫展.由PC端的网络营销的经验和常识来看,首要的是要做好移动端手机网站的优化工作.据观察分析,目前国内的大多数并没有做好手 ...

  6. 批处理测试局域网网络连通性ping1-255

    for /l %%1 in (1 1 255)do ping /n 1 192.168.1.%%1       ##bat下 运行 for /l %i in (1,1,254) do ping -n ...

  7. linux命令详解之useradd命令

    useradd命令使用方法,还包括用户账号的添加.删除与修改.用户口令的管理.用户组的管理方法. Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申 ...

  8. 11g RAC R2 之Linux DNS 配置

    在动手配置前,最好先了解下DNS的理论,以免犯不必要的错误.这都是被坑后的觉悟 -_-!!! Oracle 11g RAC 集群中引入了SCAN(SingleClientAccessName)的概念, ...

  9. Python脚本控制的WebDriver 常用操作 <二十> 处理表单元素

    测试用例场景 表单对象的操作比较简单,只需要记住下面几点 使用send_keys方法往多行文本框和单行文本框赋值: 使用click方法选择checkbox 使用click方法选择radio 使用cli ...

  10. Redis 四：存储类型之列表类型

    .lpush num 依次从左边推入0 - .rpush num 依次从右边推入0 - .lrnage num - 显示num列表中所有的数据 结果: .lpop num 从左边删除并弹出一个元素 . ...