<!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. 如何在DOS下用C/C++ 编译器

    本文来自CSDN博客     ★★ 注意:以下适合 PC 环境 ★★   ●C/C++ 编译器需要的环境变数设定     古早以来,PC 上的 C 编译器,就需要两个环境变数:     LIB:这个环 ...

  2. ABAP OO与ALV结合方式探索(1)

    用OO来开发,尤其是在复杂业务的开发过程中 从程序设计的角度而言,应该更简单一点 而ALV是二次开发中登场很高的一个控件 最近做了一些尝试,探索OO的代码和ALV的结合使用   使用控件型的ALV A ...

  3. 基于 unity ngui 上的滚动加载__UiVirtual

    在游戏里面经常会有背包,好友,对话,这样的列表.当列表的内容多了,如果一打开界面就对所有内容进行实例化,会消耗大量的性能,且会造成UI上的卡顿. 于是便需要,在列表里面只实例化屏幕上可见的item.屏 ...

  4. Git的学习总结和使用时遇到的问题。

                        git 是一款非常强大的版本控制工具,现在市场占有率应该是一家独大了,以前用svn的童鞋估计都转投git阵营了吧   加上很多公司也用git管理自己的项目,所以 ...

  5. vim 安装与运行以及代码的运行

    vi功能是最弱的,也是*nix操蛋之后最基本的editor.后来vi被增强加入众多特性,这就是vim.再后来vim加入图形接口,gvim诞生了.功能最强的是gvim,它的很多特性vim并不支持,vi更 ...

  6. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  7. 应用js改变问章字体大小

    刚来公司的时候领导给分配的都是一些简单的简单的简单的.....任务 一次叫我把文章的字体大小变换功能写出来.在网上搜了很多都不管用!不过功夫不负有心人还是被我找到了!拿出来分享下! <scrip ...

  8. 下拉刷新--第三方开源--PullToRefresh

    效果预览图: 下载地址:https://github.com/chrisbanes/Android-PullToRefresh activity_main.xml: <RelativeLayou ...

  9. 笔记 php.ini配置文件中magic_quotes_gpc, magic_quotes_runtime的作用是什么？应该开启还是关闭？

    默认情况下,PHP 指令 magic_quotes_gpc 为 on,对所有的 GET.POST 和 COOKIE 数据自动运行 addslashes().不要对已经被 magic_quotes_gp ...

  10. ApacheBench 使用教程

    ab压力测试 ab是Apache超文本传输协议(HTTP)的性能测试工具.其设计意图是描绘当前所安装的Apache的执行性能. 主要是显示你安装的Apache每秒可以处理多少个请求. 格式: ./ab ...