<!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. 济南学习 Day2 T1 am

    T1 题意:从1− n中找一些数乘起来使得答案是一个完全平方数,求这个完全平方数 最大可能是多少. 解析: 1.  质因数分解 2.  1->n用质因数指数的相加的形式将1*n累乘起来 3.   ...

  2. 8.samba server与client配置

    server端 1.安装samba:yum install -y samba\* 增加samba用户: useradd smb用户名               smbpasswd -a smb用户名 ...

  3. “==”，比较的是引用 “equals方法”比较的是具体内容

    package com.java1234.chap03.sec08; public class Demo2 { public static void main(String[] args) { //“ ...

  4. Java应用短信猫

    首先确定短信猫正常连接到主机,并安装SIM卡.先用超级终端测试短息猫能不能用.安装minicom:#sudo apt-get install minicom安装完成后,执行#sudo minicom ...

  5. FineUI 框架，RIA 富客户端应用的选择

    FineUI 框架演示地址:http://www.fineui.com/demo/ 是asp.net 和extjs 结合的框架,可以快速创建企业应用程序的界面,节省开发时间,具体使用详见fineUI ...

  6. apache2: bad user name ${APACHE_RUN_USER} 解决

    开工后,发现有个虚拟机的apache没起来,调用apache2 -k start 后,提示如下内容: apache2: bad user name ${APACHE_RUN_USER} apache ...

  7. hadoop集群默认配置和常用配置【转】

    转自http://www.cnblogs.com/ggjucheng/archive/2012/04/17/2454590.html 获取默认配置 配置hadoop,主要是配置core-site.xm ...

  8. 增强的PuTTY 以及 自定义主题

    PuTTY很早之前就没有更新了(0.62),因为都是开源的所以有人branch出来做了增强,如这个PuTTY tray,增加了超链等功能: https://puttytray.goeswhere.co ...

  9. Hadoop2安装

    http://wenku.baidu.com/view/fe1b2f22de80d4d8d15a4f6e.html http://wenku.baidu.com/view/e4607031581b6b ...

  10. IOS应用开发版本控制工具之Versions使用

    Versions版本控制工具破解版(Versions.zip)下载请见本博文附件.下载后在MAC安装完以后,图标是莲花状.见下图: 双击运行如下图:    点击Repository,连接SVN服务器R ...