<!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. sql中更新数据库用到declare @a in

    declare @a in update TB_Class set @a=1,name='李小龙' where ID=1 这样就可以像更新哪个就更新哪个了 例如ibatisnet中需要更新的时候: & ...

  2. argularJS学习笔记-增删改

    <!doctype html> <html lang="en" ng-app> <head> <meta charset="UT ...

  3. CodeIgniter(CI 3.0)分页类实践记录

    最近在学习B/S,选择了PHP CI框架作为切入点. 在尝试制作个人CMS的时候遇到了需要分页的情况,网上好像搜不到3.0版本以上的例子,下面附上本地实验的代码,供参考. 数据库情况如下: 首先看Co ...

  4. silverlight 用户浏览器未安装SL插件问题

    1.在Silverlight启动页面 <%@ Page Language="C#" AutoEventWireup="true" %> <!D ...

  5. JavaScript 中的 replace 方法

    定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. stringObject.replace(regexp/substr,replaceme ...

  6. CSS3 text-rendering属性

    这种非标准的属性目前不被推荐.我们一般会找一个可以替代的方法来完成相同的功能,不到外不得已,最好别用.   CSS的这个text-rendering属性通常被用在Windows和Linux系统中,用来 ...

  7. 【linux】学习笔记

    2014.06.07 开机无法上网,每次都得 $ sudo ifconfig eth1 up $ sudo dhclient eth1 后面发现原来是网卡没设置开机启动 编辑/etc/sysconfi ...

  8. PyQt4学习笔记1：PyQt4第一个程序

    创建一个 PyQt4 一般可以通过很少的步骤完成.通常的方法是用Qt 提供的QtDesigner工具创建界面.使用QtDesigner,可以方便地创建复杂的GUI界面.然后,可以在窗口上创建部件, 添 ...

  9. PAT乙级真题1008. 数组元素循环右移问题 (20)

    原题: 1008. 数组元素循环右移问题 (20) 时间限制400 ms内存限制65536 kB 一个数组A中存有N(N>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(M&g ...

  10. 数据分析≠Hadoop+NoSQL，不妨先看完善现有技术的10条捷径(分享)

            Hadoop让大数据分析走向了大众化,然而它的部署仍需耗费大量的人力和物力.在直奔Hadoop之前,是否已经将现有技术推向极限?这里总结了对Hadoop投资前可以尝试的10个替代方案, ...