<!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. 使用zookeeper实现分布式master选举（c 接口版本）

    zookeeper,已经被很多人所熟知,主要应用场景有(数据订阅/发布 ,负载均衡, 命名服务, 分布式协调/通知,集群管理,Master选举,分布式锁,分布式队列). C接口的描述  主要参考 Ha ...

  2. 3月3日(6) Climbing Stairs

    原题 Climbing Stairs 求斐波那契数列的第N项,开始想用通项公式求解,其实一个O(n)就搞定了. class Solution { public: int climbStairs(int ...

  3. C#使用SocketAsyncEventArgs操作套接字的简单异步通讯

    SocketAsyncEventArgs是一个套接字操作的类,主要作用是实现socket消息的异步接收和发送,跟Socket的BeginSend和 BeginReceive方法异步处理没有多大区别,它 ...

  4. 简单的jQuery获取URL的？后带的参数

    var con_name = getQueryString("con_name"); //接收con_name        function getQueryString(val ...

  5. 高德amap 根据坐标获取的地址信息

    高德地理逆地理编码接口List<List<Address>> lists = coder.getFromLocation(33.00, 116.500, 3, 3, 3, 50 ...

  6. VisualVM 监控

    一:服务器端: 找到 jstatd 所在目录 find / -name jstatd 在此目录下添加 jstatd.all.policy 文件 cat /usr/java/jdk1.7.0_51/bi ...

  7. [JS进阶] 编写可维护性代码 (1)

    今天的web应用大至成千上万行的javascript代码,执行各种复杂的过程,这种演化让我们开发者必须得对可维护性有一定的认识!编写可维护性代码很重要,很多情况下我们是以他人的工作成果为基础,确保代码 ...

  8. 最强Android模拟器genymotion的安装与配置

    Android开发人员都知道,原生的模拟器启动比较慢,操作起来也不流畅,还会出现莫名的问题.当然很多人都会选择直接使用android手机来开发,但是有时候需要在投影仪上演示程序的时候手机不太好做到吧. ...

  9. linux文件的通用操作方法学习

    2014-07-29 23:36:10 在linux下用文件描述符来表示设备文件和普通文件.文件描述符是一个整型的数据,所有对文件的操作都通过文件描述符实现. 文件描述符示文件系统中连接用户空间和内核 ...

  10. glibc学习介绍篇

    C语言自身并没有提供IO,内存管理,字符串操作等类似的机制.作为弥补,C语言有一个标准库帮助C语言实现这些机制.我们在编译C程序的时候基本上都需要链接到这些库文件. GNU C Library定义IS ...