<!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. iPhone的全球之旅 读书笔记

          最近在看<一只iPhone的全球之旅>,文章主要从iPhone供应链角度入手,从各个方面来详细剖析了iPhone这一智能手机领头羊的生产过程.       苹果iPhone手机 ...

  2. java集合学习一

    首先看一下java集合的关系图 1.1从全面了解Java的集合关系图.常见集合  list  set map等其中我们最常用的 list  map 结合.几天说一下常见的map.map在我工作的两年里 ...

  3. setuid函数解析

    在讨论这个setuid函数之前,我们首先要了解的一个东西就是内核为每个进程维护的三个UID值.这三个UID分别是实际用户ID(real uid).有效用户ID(effective uid).保存的设置 ...

  4. 如何设置fedora默认从命令行启动？

    Sumary:因为在fedora中没有/etc/initab文件我们不方便从这里设置它的runlevel target,但是linux又给我们提供了一个强悍的工具systemd,我们可以用system ...

  5. JQGrid+Webservice+LINQ

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqgridtest.asp ...

  6. JPG各种输入框样式

    输入框景背景透明:<input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框,输入框 ...

  7. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  8. 两个Activity之间的交互startActivityForResult的使用

    代码如下: package com.zzw.teststartintentforrequest; import android.app.Activity; import android.content ...

  9. How to understand ReferenceGroup control on Form[AX2012]

    在AX2012的Form开发中,微软引入了新的控件ReferenceGroup,它用在Lookup其他表RecId的时候显示更人性化的字段,它的使用还必须从表的索引说起.AX2012的表有这些索引(h ...

  10. 编写php拓展实例--slime项目（用户登录会话类）

      最近公司换了yaf框架,突然对用c实现php拓展感兴趣了,如果一个功能已经很稳定很成熟而且用的地方很多,那么我们就可以尝试用拓展实现(不一定每种情况都可以写成拓展),写成拓展后就不用每次用都包含一 ...