<!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. 洛谷 P1886 滑动窗口

    题目描述 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The array i ...

  2. C++ Maps 映射

    C++ Maps是一种关联式容器,包含“关键字/值”对 begin() 返回指向map头部的迭代器 clear() 删除所有元素 count() 返回指定元素出现的次数 empty() 如果map为空 ...

  3. TCP通信三次握手的过程

    过程 编辑 第一次 第一次握手:建立连接时,客户端 发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认:SYN:同步序列编号(Synchronize Sequence Nu ...

  4. The breakpoint will not currently be hit. No symbols have been loaded for this document."

    C# exe calls function from a native C++ DLL, and breakpoints set inside C++ source code cannot be hi ...

  5. C语言 电梯函数

    #include <stdio.h> #include <time.h> #include <stdlib.h> void test(){//汉字输出 printf ...

  6. ADO.NET笔记——调用存储过程

    相关知识: 在ADO.NET访问SQL Server时,鼓励使用存储过程取代常规的SQL语句. 存储过程有下列优点: 存储过程中的SQL语句将会经过预先的解析和编译,然后存放在数据库服务器上行.调用的 ...

  7. ADO.NET笔记——SQL注入攻击

    相关知识: 可以通过字符串的拼接来构造一个SQL命令字符串,但是SQL命令字符串的拼接确是造成“SQL注入攻击”的重要原因. 考虑下列例子:从ProductCategory表中检索出Name为“Bik ...

  8. win7局域网无法ping通本机的问题解决方法

    对于window7系统,很多朋友会发现:默认下是不允许被ping的,其实都系统自带的防护墙所阻止了,新建一个策略就可以实现被ping通,如下操作

  9. Vim一些实用的用法

    打开多个文件: 1.vim还没有启动的时候:在终端里输入 vim file1 file2 ... filen便可以打开所有想要打开的文件2.vim已经启动输入:open file可以再打开一个文件,并 ...

  10. Delphi 和 C++Builder 2014年及以后技术路线图

    RAD Studio, Delphi 和 C++Builder 2014年及以后技术路线图 By: Embarcadero News 内容源自Embarcadero新闻组,本人水平有限,欢迎各位高人修 ...