<!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. <Linux下echo指令>

    echo这个命令我们最常见的还是在shell脚本中的使用,if语句,for语句,case语句....这些都不是对echo命令的全面了解.下面还有很多其他echo的参数: 来自本人的日常生活,和对资料查 ...

  2. zedboard OPENCV移植

    1:系统环境搭建 要准备好交叉编译环境 见http://blog.csdn.net/xiabodan/article/details/22717175 2:下载cmake CMake是一个跨平台的安装 ...

  3. 常用sql时间字符转化

    这边主要用到2个函数  convert()  cast() cast是对数据字符类型的转化,例如: cast(date as datetime)   这样就将date字段转化成为时间类型了 因为常用到 ...

  4. CSS3属性box-shadow使用教程

    CSS3的box-shadow属性可以让我们轻松实现图层阴影效果.我们来实战详解一下这个属性. 1. box-shadow属性的浏览器兼容性先来看一个这个属性的浏览器兼容性: Opera: 不知道是从 ...

  5. Entity Framework 一次加载许多个 Fluent API 映射

    可通过多种方法来指定模型的 Fluent 映射(从类到数据库). 1.直接在 DbContext 类的 OnModel­Creating 方法中进行映射,如下所示: protected overrid ...

  6. [转]Android在eclipse中的快捷键

    1.选中你要加注释的区域,用ctrl+shift+C 会加上//注释2.先把你要注释的东西选中,用shit+ctrl+/ 会加上/*    */注释3.要修改在eclispe中的命令的快捷键方式我们只 ...

  7. Redis源码研究--启动过程

    ---------------------6月23日--------------------------- Redis启动入口即main函数在redis.c文件,伪代码如下: int main(int ...

  8. 短小强悍的JavaScript异步调用库

    对于博文 20行完成一个JavaScript模板引擎 的备受好评我感到很惊讶,并决定用此文章介绍使用我经常使用的另一个小巧实用的工具.我们知道,在浏览器中的 JavaScript 绝大部分的操作都是异 ...

  9. javascript中出现identifier starts immediately after numeric literal错误原因以及解决方法

    javascript遇到参数是字符型和数字型组合的参数就会出现这种错误,例如alert(1);可以正確輸出alert(str);就會報錯alert("str");可以正確輸出.

  10. 【转载】使用Axure制作App原型怎样设置尺寸？

    使用Axure制作App原型怎样设置尺寸? 原文地址:http://www.axure.us/2172/ 本文由原型库网站投稿,转载请注明出处. 最近有几位小伙伴儿都提出同样一个疑问:想用Axure设 ...