<!DOCTYPE html>

<html>

<head>

    <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" />

    <link href="scripts/movielist.css" rel="stylesheet" />

	<style>

	pre { font-size:10pt; font-weight:bold; }

	</style>

</head>

<body>

<a href="../demos.html">JsRender Demos</a><br />

<h3>Example Scenario: Accessing parent data.</h3>

<!---------------------- First Example ---------------------->

<div class="subhead">Stepping up through the views (tree of nested rendered templates)</div>

<table>

	<thead><tr><th>Title</th><th>Languages (+specialMessage)</th></tr></thead>

	<tbody id="movieList1"></tbody>

</table>

<!---------------------- Second Example ---------------------->

<div class="subhead">Setting contextual template parameters, accessible in all nested contexts as <em>~nameOfParameter</em>:</div>

<table>

	<thead><tr><th>Title</th><th>Languages (+specialMessage)</th></tr></thead>

	<tbody id="movieList2"></tbody>

</table>

<!---------------------- Third Example ---------------------->

<div class="subhead">Using the top-level data, accessible in all nested contexts as <em>~root</em>:</div>

<table>

	<thead><tr><th>Title</th><th>Languages (+specialMessage)</th></tr></thead>

	<tbody id="movieList3"></tbody>

</table>

<!--=================== Demo ===================-->

<!------------------ Templates ------------------>

<script id="movieTemplate1" type="text/x-jsrender">

	{{for movies}}

		<tr>

			<td>'{{>title}}': showing at the '{{>#parent.parent.data.theater}}'</td>

			<td>

				{{if languages}}

					{{for languages}}

						{{>#data}}{{>#parent.parent.parent.parent.parent.data.specialMessage(#data, #parent.parent.data.title)}}<br/>

					{{/for}}

				{{/if}}

			</td>

		</tr>

	{{/for}}

</script>

<script id="movieTemplate2" type="text/x-jsrender">

	{{for movies ~theater=theater ~specialMessage=specialMessage}}

		<tr>

			<td>'{{>title}}': showing at the '{{>~theater}}'</td>

			<td>

				{{for languages ~title=title}}

					{{>#data}}{{>~specialMessage(#data, ~title)}}<br/>

				{{/for}}

			</td>

		</tr>

	{{/for}}

</script>

<script id="movieTemplate3" type="text/x-jsrender">

	{{for movies}}

		<tr>

			<td>'{{>title}}': showing at the '{{>~root.theater}}'</td>

			<td>

				{{for languages ~title=title}}

					{{>#data}}{{>~root.specialMessage(#data, ~title)}}<br/>

				{{/for}}

			</td>

		</tr>

	{{/for}}

</script>

<!------------------ Script ------------------>

<script type="text/javascript">

    var model = {

        specialMessage: function (language, title) {

            if (language === "French" && title === "City Hunter") { return ": (special offer)"; }

        },

        theater: "Rialto",

        movies: [

			{

			    title: "Meet Joe Black",

			    languages: [

					"English",

					"French"

			    ]

			},

			{

			    title: "City Hunter",

			    languages: [

					"Mandarin",

					"French",

					"Chinese"

			    ]

			}

        ]

    };

    $("#movieList1").html(

		$("#movieTemplate1").render(model)

	);

    $("#movieList2").html(

		$("#movieTemplate2").render(model)

	);

    $("#movieList3").html(

		$("#movieTemplate3").render(model)

	);

</script>

</body>

</html>

　　

JsRender系列-11的更多相关文章

  1. Java 集合系列11之 Hashtable详细介绍(源码解析)和使用示例

    概要 前一章,我们学习了HashMap.这一章,我们对Hashtable进行学习.我们先对Hashtable有个整体认识,然后再学习它的源码,最后再通过实例来学会使用Hashtable.第1部分 Ha ...

  2. Java 集合系列 11 hashmap 和 hashtable 的区别

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

  3. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(11)-验证码实现和底层修改

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(11)-验证码实现和底层修改 ASP.NET MVC+EF框架+EasyUI实现权限管系列  (开篇)   (1):框架搭建    ...

  4. saltstack自动化运维系列11基于etcd的saltstack的自动化扩容

    saltstack自动化运维系列11基于etcd的saltstack的自动化扩容 自动化运维-基于etcd加saltstack的自动化扩容# tar -xf etcd-v2.2.1-linux-amd ...

  5. C#程序集系列11,全局程序集缓存

    全局程序集缓存(GAC:Global Assembly Cache)用来存放可能被多次使用的强名称程序集.当主程序需要加载程序集的时候,优先选择到全局程序集缓存中去找寻需要的程序集. 为什么需要全局程 ...

  6. 【转】Java 集合系列11之 Hashtable详细介绍(源码解析)和使用示例

    概要 前一章,我们学习了HashMap.这一章,我们对Hashtable进行学习.我们先对Hashtable有个整体认识,然后再学习它的源码,最后再通过实例来学会使用Hashtable.第1部分 Ha ...

  7. Spring框架系列(11) - Spring AOP实现原理详解之Cglib代理实现

    我们在前文中已经介绍了SpringAOP的切面实现和创建动态代理的过程,那么动态代理是如何工作的呢?本文主要介绍Cglib动态代理的案例和SpringAOP实现的原理.@pdai Spring框架系列 ...

  8. .Net程序员学用Oracle系列(11)：系统函数（下）

    1.聚合函数 1.1.COUNT 函数 1.2.SUM 函数 1.3.MAX 函数 1.4.MIN 函数 1.5.AVG 函数 2.ROWNUM 函数 2.1.ROWNUM 函数简介 2.2.利用 R ...

  9. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

随机推荐

  1. IE Problem : inetcpl.cpl

    从windows8升级windows8.1后每次关闭ie11浏览器总是跳出出现一个问题导致关闭,我都快疯了,以前windows8一点问题都没有.这是怎么回事?还有能回到ie10吗?(张浩228) 小昕 ...

  2. 配置Qt开发环境下的OpenCV开发

    1.使用CMake工具(http://www.cmak.org),选择MinGW Makefile. *一定要注意编译的版本要与Qt的mingw32的版本相同.否则容易出现undefined refe ...

  3. C#学习笔记（第1周作业）

    受队友诱惑,去听了李强的C#公选课,第二天就完成作业了. 作业要求: 1. 小学生加法程序: 2. 能自由设置难度: 3. 对结果进行统计. 第一次写C#程序,遇到不少困难,和队友讨论,百度谷歌一齐上 ...

  4. 安装php-posix

      1.安装php-posix 1 yum -y install php-process 2.验证是否安装上了 1 php -m|grep posix 1 posix  

  5. boost:program_options

    由于系统库getopt和getopt_long用起来不够直观,仔细看了下boost发现Boost.Program_options可以满足我的需求,它和getopt系列函数一样,可以抓起命令行参数,这里 ...

  6. c++11: less的用法

    less主要是重载了operator()方法,用来比较lhs 和 rhs std::less::operator() bool operator()(const T &lhs, const T ...

  7. Linux 网络工具之fping

    系统中有个最最常用命令工具--ping,而fping 是ping 工具的加强版本.安装过程很简单: [root@mail /]# wget --limit-rate 500k http://www.f ...

  8. 【Qt】Qt国际化(系统文本-QMessageBox按钮、QLineEdit右键菜单等)【转】

    简介 使用Qt的时候,经常会遇到英文问题,例如:QMessageBox中的按钮.QLineEdit.QSpinBox.QScrollBar中的右键菜单等.通常情况下,我们软件都不会是纯英文的,那么如何 ...

  9. SQL Server中timestamp（时间戳）

    SQL Server timestamp 数据类型与时间和日期无关.SQL Server timestamp 是二进制数字,它表明数据库中数据修改发生的相对顺序.实现 timestamp 数据类型最初 ...

  10. 测试使用Windows Live Writer

    目前是在win7系统下面使用的,曾经在winxp下去配置,却失败了,难道不支持xp? Windows Live Writer好像不支持代码关键字高亮显示啊. int main(void) { prin ...