<!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. Codevs 1014 装箱问题

    题目描述 Description 有一个箱子容量为V(正整数,0<＝V<＝20000),同时有n个物品(0<n<＝30),每个物品有一个体积(正整数). 要求n个物品中,任取若 ...

  2. linux kernel with param

    Linux kernel support pass param to kernel, this params can be assigned at load time by insmod or mod ...

  3. const char *p、char const *p、char * const p的区别？

    const char *p和char const *p是一样的,都表示定义一个指向字符常量的指针,指针的内容(字符)不可变.char * const p表示一个指向字符的指针常量,字符可以改变,但是指 ...

  4. Silverlight中嵌套html、swf、pdf

    1.MainPage.xaml <UserControl x:Class="SilverlightClient.MainPage" xmlns="http://sc ...

  5. [大牛翻译系列]Hadoop（20）附录A.10 压缩格式LZOP编译安装配置

    附录A.10 LZOP LZOP是一种压缩解码器,在MapReduce中可以支持可分块的压缩.第5章中有一节介绍了如何应用LZOP.在这一节中,将介绍如何编译LZOP,在集群做相应配置. A.10.1 ...

  6. js学习笔记一数字

    js所有数值都用浮点数来表示 十六进制数字以0x或者0X为前缀,由0-9,a-f(大小写均可)之间字符构成,a-f对应的数值是10-15 八进制数字以数字0开始,其后跟随0-7之间的数字,严格来说,j ...

  7. 为什么24位位图（真彩色）的biSizeImage不等于(biWidth*biBitCount+31)/32*4*biHeight？

    规定的,规定BMP文件的像素数据是按行存储的,而且每行的字节数必须为4的倍数,如果实际的像素数据不是4的倍数咋办?这就需要字节对齐,对齐是在一行的末尾添0以补足一行的字节数为4的倍数, ( biWid ...

  8. fast_recovery_area无剩余空间（ORA-19815）

    一.问题现象 --执行日志切换时,夯住 SQL ('/u01/oradata/oracle/redo04.log') size 50m; SQL> alter system switch log ...

  9. 如果在配置中将“system.serviceModel/serviceHostingEnvironment/multipleSiteBindingsEnabled”设置为 true，则需要终结点指定相对地址。如果在终结点上指定相对侦听 URI，则该地址可以是绝对地址。若要解决此问题，请为终结点“http://localhost/Service1.svc”指定相对 URI。

    问题: 如果在配置中将"system.serviceModel/serviceHostingEnvironment/multipleSiteBindingsEnabled"设置为 ...

  10. C# 命名参数【转】

    命名参数(Named Arguments)就是说在调用函数时可以通过指定参数名称的方式来调用参数.它最大的好处就是方便调用参数时按调用者的需要来排列顺序,而不必死守函数声明时的顺序(相对于“位置参数” ...