<!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. NOIP 2015复赛提高组Day2 T1==Codevs 4768 跳石头

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold  题目描述 Description 一年一度的“跳石头”比赛又要开始了! 这项比赛将在一条笔直的河道中进行,河道中 ...

  2. nginx配置多个网址

    实战Nginx与PHP(FastCGI)的安装.配置与优化:http://ixdba.blog.51cto.com/2895551/806622 Nginx配置文件详细说明:http://www.cn ...

  3. 14种网页jQuery和css3特效插件代码演示

    1.网页table增删样式代码 演示和下载地址 2.jQuery左右滑动幻灯片插件 演示和下载地址 3.jQuery文字轮播焦点图 演示和下载地址 4.网页文字焦点图切换 演示和下载地址 5.jQue ...

  4. 主机win10与虚拟机ubuntu14.04通信

    主机是笔记本win10系统,在virtualbox虚拟机里面安装了ubuntu14.04系统,现在想让它们互联互通. 我的笔记本是通过路由器无线连接接入的互联网,设置了固定ip:192.168.0.4 ...

  5. DevExpress学习笔记1-ProductsDemo.Win

    最近在学习ProductsDemo.Win,有一些体会记录下来,大家分享: 在Contacts模块: 在Private Sub UpdateCurrentContact()过程添加一句:InitInd ...

  6. 基于 WebAPI 的 API 实现

    本文基于 WebAPI OData (微软发起的一个格式标准,其中一个比较有意思的是可以直接在 Excel 中填入 API 就可以展示了) Swashbuckle.OData(把 API 生成一个测试 ...

  7. 对现有Hive的大表进行动态分区

    分区是在处理大型事实表时常用的方法.分区的好处在于缩小查询扫描范围,从而提高速度.分区分为两种:静态分区static partition和动态分区dynamic partition.静态分区和动态分区 ...

  8. Hive基本命令整理

    创建表: hive> CREATE TABLE pokes (foo INT, bar STRING);          Creates a table called pokes with t ...

  9. ERROR 1205 (HY000): Lock wait timeout exceeded; try restarting transaction

    测试库一条update语句报错:ERROR 1205 (HY000): Lock wait timeout exceeded; try restarting transaction mysql> ...

  10. 【nodejs】 npm 注意事项

    官网:https://www.npmjs.com/ 1.安装时要切换到nodejs根目录,  否则就会安装到安装时所在的目录 2.要有管理员权限(win),如需指定版本,如npm install ex ...