<!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. 模拟n步一维随机游走的情况。

    package randomWalk; import java.util.Random; import java.util.Scanner; public class RandomWalk { pub ...

  2. windows phone 手机截图

    无聊在商城找了一款小游戏玩,看到一个截屏功能,就google了一下具体实现,还是比较简单的,主要是靠WriteableBitmap(提供一个可写入并可更新的 BitmapSource)类实现.看一下m ...

  3. android activity空指针异常解决问题解决

    今天在开发过程中,遇到了一个错误 unable to instantiate activity componentinfo java.lang.nullpointerexception google之 ...

  4. ADO.NET笔记——执行事务

    相关知识: 处于同一事务(Transaction)内的一组操作,要么都成功执行,最后完全提交:但如果只要有任何一个操作失败或者出问题,所有值钱执行的操作也都取消并恢复到初始状态(即回滚) SqlTra ...

  5. 学习CentOS7笔记(一)

    说明: 1.这是我第一次接触CentOS7,从基础学起. 2.最终目的是为了在CentOS上面部ngix+php+mysql+naxsi环境,进行安全测试. 第一部分 认识CentOS 7 有时候我在 ...

  6. Less 导入命令 @import

    在这个less文件上想导入另一个less文件, 连在同级的文件里直接可用文件名 @import url('css.less')或@import rul(css) 连下级的文件 @import url( ...

  7. Bootstrap模态框

    backdrop选项,当设置成false的时候, 背景不会出现半透明的遮盖层,当用户点击模态框外部时不会关闭模态框: 设置成true的时候会出现遮盖层,当用户点击模态框外部时则会关闭模态框. 那如果又 ...

  8. Scrapy源码学习（二）

    上次说到scrapy_home/scrapy/commands包下每个模块对应了scrapy命令行中的一个命令,他们都继承自command.py模块中ScrapyCommand这个类,这次就来简单看一 ...

  9. mysql怎么从1开始递增

    前提:使用SQLyog数据库管理工具 1.打开更改表: 2.点击表字段下方“高级属性”: 3.找到“自动递增”这一项,值改为1: 4.点击“确定”关闭高级属性表弹出框: 5.点击“Alter”关闭更改 ...

  10. "=="和equals方法究竟有什么区别

    (单独把一个东西说清楚,然后再说清楚另一个,这样,它们的区别自然就出来了,混在一起说,则很难说清楚) ==操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的数值是否相同, ...