<!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. 3.servlet实现页面的跳转

    效果: 在网页的输入框中输入lily,跳到成功的页面(请求转发),输入的不是lily则跳到百度的页面(跳到工程之外的页面,则是请求重定向) 1.建Web project“2Servlet_Basic” ...

  2. linux命令行解析函数介绍

    函数原型:         int getopt(int argc,char * const argv[ ],const char * optstring);         给定了命令参数的数量 ( ...

  3. CenterOS中安装Redis及开机启动设置

    Redis安装 从官方下载最新Redis进行安装,官网地址:http://redis.io/download $ wget http://download.redis.io/releases/redi ...

  4. Ubuntu 12.04 修改默认启动为字符界面

    sudo vim /etc/default/grub 修改GRUB_CMDLINE_LINUX_DEFAULT="quiet splash" 为:GRUB_CMDLINE_LINU ...

  5. linux服务器git pull/push时提示输入账号密码之免除设置

    1.先cd到根目录,执行git config --global credential.helper store命令 [root@iZ25mi9h7ayZ ~]# git config --global ...

  6. Oracle 摘去数据块的面纱

    Offset 0 1 2 3 4 5 6 7 8 9 A B C D E F 00018000h 6 A2 0 0 0c 0 80 3 8b 61 15 0 0 0 3 4 type frmt spa ...

  7. poj 3740 Easy Finding 二进制压缩枚举dfs 与 DLX模板详细解析

    题目链接:http://poj.org/problem?id=3740 题意: 是否从0,1矩阵中选出若干行,使得新的矩阵每一列有且仅有一个1? 原矩阵N*M $ 1<= N <= 16 ...

  8. Seafile V4.1 安装笔记

    yum -y install gcc gcc-c++ make cmake pcre pcre-devel expat expat-devel curl wget mlocate gd gd-deve ...

  9. 为什么V8引擎这么快？（转载）

    转载请注明出处:http://blog.csdn.net/horkychen Google研发的V8 JavaScript引擎性能优异.我们请熟悉内部程序实现的作者依源代码来看看V8是如何加速的. 作 ...

  10. Java中List和ArrayList的区别

    List:是一个有序的集合,可以包含重复的元素.提供了按索引访问的方式.它继承 Collection.List有两个重要的实现类:ArrayList 和 LinkedListArrayList:我们可 ...