<!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. 使用DriverManager获取数据库连接的一个小改进

    由于使用DriverManager获取数据库连接时,由于DriverManager实现类中有一段静态代码块,可以直接注册驱动,且可以同时管理多个驱动程序 所以当换数据库连接时需要指定不同的数据库,那么 ...

  2. Arduino CNC Shiled 和 DRV8825驱动板的注意事项

    首先说明硬件:1) Arduino CNC Shiled V2.6 2)DRV8825驱动板 3)光驱步进电机  4)Arduino  uno R3 下图是本次主角是Arduino CNC Shile ...

  3. PHP合并数组保留key值

    PHP合并数组,键值不变   尝试了好几个合并数组的函数, 但是都是把key值重置, 导致key值丢失(因为key值是要用到的) 大大说, 最好用数组的相关函数, 网上随意找了下, 还是没找到. 因为 ...

  4. OpenSUSE 安装并启动Tomcat

    安装.用YsST2搜索tomcat安装就好了.不过版本肯定不如官网的新,笔者用的是7.0.42,最新的已经到8.X了. 启动.在服务管理器中找到tomcat,启动.

  5. JAVA 编码机制

    先看例子: public class Test { public static void main(String[] args) { char han = '永'; System.out.printl ...

  6. AndroidSDK无法下载API包的解决方法

    1:打开Android SDK Manager”,然后点击菜单栏中的“Tools”菜单选项,接下来只需选择“Options”选项即可打开设置窗体,在打开的选项中找到Others框,里面勾选第一个: F ...

  7. pipe/popen/fifo

    pipe(管道) 专用于父子进程通信, 函数原型 int pipe(int fd[2]) fd[0]表示输入, fd[1]表示输出 如果父子进程要双向通信, 可以通过类似信号的功能进行控制, 也可以简 ...

  8. 表达式语言之java对正则表达式的处理

    正则表达式用于字符串匹配,字符串查找,字符串替换等.例如注册email格式的验证等.java中处理正则表达式相关的类主要有java.lang.String,java.util.regex.Patter ...

  9. 11G RAC 简单命令

    1.查看集群状态: [root@rac1 ~]# su - grid [grid@rac1 ~]$ crsctl check clusterCRS-4537: Cluster Ready Servic ...

  10. Window.Open参数、返回值

    一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: window.open(pageURL,name, ...