<!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. CityEngine2012(32位)安装

    今天下午把CityEngine2012装好了,既然Esri大力推CityEngine作为其三维建模软件,那就学习一下,还好没花多长时间搞定破解版,以前装Erdas,南方CASS,AutoCAD那些该死 ...

  2. hadoop2.2.0伪分布式搭建

    1.准备Linux环境     1.0点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet ...

  3. Git的学习总结和使用时遇到的问题。

                        git 是一款非常强大的版本控制工具,现在市场占有率应该是一家独大了,以前用svn的童鞋估计都转投git阵营了吧   加上很多公司也用git管理自己的项目,所以 ...

  4. jQuery之$(document).ready()使用介绍

    学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件 学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须 ...

  5. delphi下，不错的多语言翻译组件

    http://yktoo.com/en/software/dklangTraned http://sourceforge.net/projects/dklang/

  6. Ztack学习笔记(1)-初识Ztack

    一.Zigbee协议 Zigbee是IEEE 802.15.4协议的代名词,是一种短距离.低功耗的无线通信技术.这一名称来源于蜜蜂的八字舞,因为蜜蜂(bee)是靠飞翔和“嗡嗡”(zig)地抖动翅膀的“ ...

  7. Is C# a clone of a Microsoft replacement for Java?

    Is C# a clone of a Microsoft replacement for Java?Let's look at what Anders Hejlsberg Said. Hejlsber ...

  8. 关于一道简单的Java 基础面试题的剖析： short s1=1;s1 = s1 +1会报错吗？

    package common; public class ShortTypeTest { /* * @param args */ public static void main(String[] ar ...

  9. Java HTML页面抓取实例

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  10. OPatch failed with error code 73

    前几天给一套LINUX下的RAC数据库打补丁升级,有一台机器更新失败了,相关的异常内容如下: Restoring "/u01/app/oracle/11.2.0/db_1" to ...