<!DOCTYPE html>

<html>

<head>

	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>

	<script src="../../jsrender.js" type="text/javascript"></script>

	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />

	<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />

</head>

<body>

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

<h3>Template composition. Using external templates for block tags, such as {{for}} and {{if}}.</h3>

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

	<tr>

		<td>{{include tmpl="#headerTemplate"/}}</td>

		<td>

			{{for languages tmpl="#columnTemplate"/}}

		</td>

		<td>

			{{for languages tmpl=tmpl/}}

		</td>

		<td>

			{{for languages tmpl='#conditionalTemplate'/}}

		</td>

		{{include tmpl="#sectionWrapperTemplate"}}

			{{>title}}

		{{/include}}

		<td>

			{{for languages tmpl='#indexWrapperTemplate'}}

				<b>{{>name}}</b>

			{{/for}}

		</td>

	</tr>

</script>

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

	<td>{{>title}}</td>

</script>

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

	<td>Section: <em>{{include tmpl=#content/}}</em></td>

</script>

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

	<div>

		<em>{{>name}}</em>

	</div>

</script>

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

	<span>

		<b>{{>name}}</b>

	</span>

</script>

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

	{{if name.charAt(0)==='E' tmpl='#rowTemplate'}}

	{{else tmpl='#columnTemplate'}}

	{{/if}}

</script>

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

	<div>

		{{:#index}}:

		{{include tmpl=#content/}}

	</div>

</script>

<table>

	<thead><tr><th>Synopsis</th><th>Fixed Template</th><th>Template specified in data</th><th>Conditional Template</th><th>Wrapper Template</th><th>Repeating Wrapper Template</th></tr></thead>

	<tbody id="movieList"></tbody>

</table>

<script type="text/javascript">

	var movies = [

		{

			title: "Meet Joe Black",

			languages: [

				{ name: "English" },

				{ name: "French" }

			],

			tmpl: "#columnTemplate"

		},

		{

			title: "Eyes Wide Shut",

			languages: [

				{ name: "French" },

				{ name: "Esperanto" },

				{ name: "Spanish" }

			],

			tmpl: "#rowTemplate"

		},

		{

			title: "The Inheritance",

			languages: [

				{ name: "English" },

				{ name: "German" }

			],

			tmpl: "#columnTemplate"

		}

	];

	$( "#movieList" ).html(

		$( "#movieTemplate" ).render( movies )

	);

</script>

</body>

</html>

　　

JsRender系列demo(6)-无名的更多相关文章

  1. JsRender系列demo(9)自定义函数

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. JsRender系列demo(7)compline

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

  3. JsRender系列demo(5) for else

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. JsRender系列demo(4)-if else

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. JsRender系列demo(3)-自定义容器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. JsRender系列demo(2)多模板-template

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. JsRender系列demo(1)-insert-data

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. JsRender系列-11

    <!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...

  9. JsRender系列demo-10

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

随机推荐

  1. Install GDAL in OpenSUSE 12.3 Linux

    Runtime Enviroment:Open SUSE Linux *i385 Notice:if any command disavliable ,you can copy the paramet ...

  2. bzoj 1009:[HNOI2008]GT考试

    这道题机房n多人好久之前就A了…… 我到现在才做出来…… 一看就是DP+矩阵乘法,但是一开始递推式推错了…… 正确的递推式应该是二维的…… f[i][j] 表示第准考证到第 i 位匹配了 j 位的方案 ...

  3. 配置普通用户可以运行saltstack的模块

    client_acl 配置使用 1.概述:开启对系统上非root的系统用户在master上可以执行特殊的模块.这些模块名可以使用正则表达式来表示,不能指定对哪些minion执行命令.执行命令只需要切换 ...

  4. i18next-页面层语言国际化js框架介绍

    因为工作需要,最近研究了下网站语言国际化的问题,根据当前项目架构,寻求一种较好的解决方案.首先总结下项目中语言切换实现方式大概有以下几种: 1,一种语言一套页面,如:index_CN.html,ind ...

  5. hadoop架构

    HADOOP中可以分为两个大的模块,存储模块和计算模块.HDFS作为存储模块,JobTracker,TaskTracker构成计算模块.   1.HADOOP的文件是以HDFS格式存储的   HDFS ...

  6. 【Delphi】最小化事件捕捉

    添加一个ApplicationEvents组件在窗体,然后处理其OnMinimize事件和OnRestore事件即可.

  7. How to change Form & Property & Report font for current User [AX2012]

    对于我们开发人员来说,系统默认的字体,本人实在不喜欢,尤其是属性字体[太小,太细,根本看不清],每次做一个新项目[AX2012]第一件事就是更改字体. 由于AX2012没有像AX2009那样,可以工具 ...

  8. Sigma.js

    http://www.cnblogs.com/kingboy2008/p/6117741.html

  9. DirectoryEntry配置IIS出现ADSI Error：未知错误(0x80005000)

    目录 问题案例 原因分析 解决问题 总结 问题案例 DirectoryEntry配置IIS,在IIS6.0下运转正常,但IIS7.0下运转会出错: System.DirectoryServices.D ...

  10. linux安装IPython四种方法

    IPython是Python的交互式Shell,提供了代码自动补完,自动缩进,高亮显示,执行Shell命令等非常有用的特性.特别是它的代码补完功能,例如:在输入zlib.之后按下Tab键,IPytho ...