<!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>

  

随机推荐

  1. Chrome 开发者工具(DevTools)中所有快捷方式列表

    Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间.下面列出了每个快捷键在Windows/Linux及Mac中的对应键.其中一些快捷键对于Dev ...

  2. C# 的析构

    首先介绍下关于C#的GC垃圾回收器,有了这个垃圾回收器c#的开发人员可以不用像C++开发人员那样关心垃圾回收! 但是GC是把双刃剑,GC仅仅对于托管资源进行管理,对非托管资源却无能为力,并且C#的开发 ...

  3. php 页面传递数组元素

    前台页面的表单中添加多个input元素,如下: <form action="a.php">  <input type="text" name= ...

  4. 夺命雷公狗---微信开发54----微信js-sdk接口开发(1)之快速入门

    js-sdk基本介绍 除去服务号的九大接口外,微信提供了JS-SDK接口,所谓JS-SDK接口也就是在网页中使用javascript来更改网页设置, (比如隐藏右上角的菜单)获取用户状态(比如地理位置 ...

  5. MySQL源码之两阶段提交

    在双1的情况下,两阶段提交的过程 环境准备:mysql 5.5.18, innodb 1.1 version配置: sync_binlog=1 innodb_flush_log_at_trx_comm ...

  6. MSSQL 获取指定日期所在星期的第一天和最后一天日期 获取指定日期坐在月的第一天和最后一天

    ufn_GetWeekFirstAndEndDay    获取指定日期所在星期的第一天和最后一天日期 ALTER FUNCTION [dbo].[ufn_GetWeekFirstAndEndDay]( ...

  7. python 文本编辑基础记录

    不熟悉编码方式,同时python的编码方式折磨我了很长时间,记录下,以免忘记,本文内容存在错误,是自己理解,看到仅当参考 Unicode 是字符集,有点像一本字典,utf-8是在unicode这本字典 ...

  8. IT企业如何实现项目管理信息化的目标

    随着信息化技术的不断深入,企业管理方式逐渐向信息化管理转变.大部分IT企业也为了适应企业管理方式的变革,开始加强对管理信息化创新方面的建设.而IT企业在实现信息化的进程中,项目管理信息化其实是IT企业 ...

  9. 手机App调试(Android)

    方法一:  用Chrome+手机来调试.1) 在PC上安装谷歌的USB驱动:         http://developer.android.com/sdk/win-usb.html#top     ...

  10. 【Java】【问题】

    [log4j:WARN No appenders could be found for logger 解决方案] [解决] 我们在使用Log4j的时候,总是出现: log4j:WARN No appe ...