<!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. 从malloc中窥探Linux内存分配策略

        malloc函数是C/C++中常用内存分配库函数,本篇文章将以Linux平台上的malloc为剖析对象,深入了解分配一块内存的旅程. malloc入门      使用malloc,需要包含头文 ...

  2. C语言 猜数游戏--产生一个随机数

    #include <stdio.h> #include <time.h> #include <stdlib.h> int main(int argc, const ...

  3. Android 悬浮窗 WindowManager WindowManager.LayoutParamas

    前方高清大图~~~~ 绘制的图片资源: // draw bitmap BitmapDrawable bmpDraw = (BitmapDrawable) getResources().getDrawa ...

  4. easyUI中treegrid组件构造树形表格（简单数据类型）+ssm后台

    这几天做的项目要求用树形表格的形式展示一部分数据,于是就想到了使用easyUI的treegrid组件,但几经翻查各种资料,发现数据类型大多采取标准数据类型,即包含children元素的数据类型,小编查 ...

  5. 51nod 1021 石头归并

    1021 石子归并 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 N堆石子摆成一条线.现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆石子合 ...

  6. logstash 统计告警

    在实际的项目中需要对线上日志做实时分析跟统计,这一套方案可以用现有的ELK(ElasticSearch, Logstash, Kibana)方案既可以满足,关于这个方案的具体的步骤可以参考网上的解决方 ...

  7. http 错误编号大全（转）

      状态行包含HTTP版本.状态代码.与状态代码对应的简短说明信息.在大多数情况下,除了Content-Type之外的所有应答头都是可选的.但Content-Type是必需的,它描述的是后面文档的MI ...

  8. 基于lnmp.org的xdebug安装

    1. 下载xdebug wget http://xdebug.org/files/xdebug-2.3.3.tgz 2. 创建一个目录: mkdir ./xdebug 3. 复制xdebug包到xde ...

  9. Oracle定义常量和变量

    1.定义变量 变量指的就是可变化的量,程序运行过程中可以随时改变其数据存储结构 标准语法格式:<变量名><数据类型>[(长度):=<初始值>] 示例: declar ...

  10. backbone collection add 事件回调参数

    this.listenTo(this.collection, 'add', this.renderBook); renderBook: function (item) { var bookView = ...