<!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. 各个公司的来源/The etymology of company

    1.List of Company Etymology 下面的维基百科词条是比较有名的一些公司的名称的来源 List of company name etymologies 2.Atmel : adv ...

  2. 巧用Excel分列功能处理数据

    Technorati 标签: 数据处理      今天,主要工作就是处理测试数据,统计汇总成图表来显示.先来说说要求,然后给出我在折腾这堆数据中遇到的问题以及解决方法.   问题要求:       格 ...

  3. git使用小结

    本篇文章主要介绍自己在平时工作中使用git的一些常用命令,之前都是记录在本子上面,现在把他们记录在博客上,便于保存和回顾. 1. 建立自己的git仓库 1.1 在一个新建的repo文件夹里面,执行gi ...

  4. activiti系列导读

    此用于管理activiti系列标签文章,activiti的分析是建立在目前最新的版本5.21之上. 官方指导手册链接:http://www.activiti.org/userguide/index.h ...

  5. Oracle计算两个整数的和与这两个整数的差与商

    PL/SQL(Procedural Language/SQL)是一种过程化语言. PL/SQL都是以(BLOCK)块为基本单位,整个PL/SQL块分为三部分 1.声明(Declare) 2.执行(以B ...

  6. WPF-控件-ListView

    <Window x:Class="DataTemplate2.MainWindow" xmlns="http://schemas.microsoft.com/win ...

  7. JNI-入门之一

    下面我们开始编写HelloWorld程序,由于涉及到要编写c/c++代码因此我们会在开发中使用Microsoft VC++工具. 编写java代码我们在硬盘上建立一个hello目录作为我们的工作目录, ...

  8. 自定义更新Hibernate Ehcache

    最近在做一个项目中需要用缓存,项目持久层用的是Hibernate,然后就考虑用二级缓存来实现,但是后来项目扩展,由第三方修改数据这样缓存就会要等到失效后重新获取数据库的数据,本来这样是没问题的,可是领 ...

  9. Android crop image size

    private void performCrop() { try { //call the standard crop action intent (the user device may not s ...

  10. C#调用PowerShell的经历

    好久没有写程序了, 再次上手也处于功能强大的Windows PowerShell的缘故. 不多话, 先上段代码引入正题.... static Collection<PSObject> Ru ...