<!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. python 实现梯度下降

    在多元线性回归中会用到梯度下降来计算参数值.这里我用python实现一个梯度下降版本. 这里多元线性方程为 y = A0+A1*x1+...+An* xn 数据输入格式,y表示 y \t x1 \t ...

  2. LLVM language 参考手册（译）（5）

    垃圾回收器名称(Garbage Collector Names) 每一个函数可以制定一个垃圾回收期的名称,这个名称是一个简单的字符串: define void @f() gc "name&q ...

  3. float，double和decimal的精度问题

    先标注一个音标,因为我老是读错:decimal ['desɪml] 精度对比: 类型 CTS 类型 描述 有效数字 范围 float System.Single 32-bit single-preci ...

  4. MySQL事务机制

    事务机制的特性通常被概括为"ACID原则" A(Atomic) 原子性: 构成一个事务的所有语句应该是一个独立的逻辑单元,要么全部执行成功, 要么一个都不成功, 你不能只执行他们当 ...

  5. 延迟加载图片的 jQuery 插件：Lazy Load

    网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...

  6. PowerDesigner中遍历物理模型中的所有表，检查表代码、字段代码

    '***************************************************************************** '文件:CheckCode4SqlServ ...

  7. php生成圆形图片

    http://files.cnblogs.com/files/adtuu/circle_image.zip

  8. 更改windows服务的配置文件app.config

    /// <summary> /// 获取每次处理记录数 /// </summary> /// <returns></returns> private s ...

  9. Sublime Text 前端开发常用扩展插件推荐

    Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...

  10. JQuery解析JSon

    JsonCreatet.ashx页面 JSonAnalysis.aspx测试页面 一般处理程序中使用Newtonsoft.Json来序列化json 页面使用Jquery 来解析Json数据 Jquer ...