注释、自定方法、模板嵌套子模板、循环输出不同class

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- saved from url=(0043)http://jtemplates.tpython.com/example4.html -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script type="text/javascript" src="Scripts/jTemplates/example/jquery.js"></script>

    <script type="text/javascript" src="Scripts/jTemplates/jquery-jtemplates.js"></script>

    <title>jTemplates</title>

    <script type="text/javascript">

        // data for testing

        $(document).ready(function () {

            var data = {

                name: 'User list',

                list_id: 4,

                table: [

					{ id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com' },

					{ id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com' },

					{ id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com' },

					{ id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com' },

					{ id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com' }

                ],

                toString: function () {

                    return this.name.bold() + ' (count: ' + this.table.length + ')';

                }

            };

            // attach the template

            $("#result1").setTemplateElement("template");

            // process the template

            $("#result1").processTemplate(data);

            //{**} 注释

            //

        });

    </script>

    <style type="text/css">

        .jTemplatesTest {

            background: #DDD;

            border: 1px solid #000;

            margin: 2em;

            width: 480px;

        }

            .jTemplatesTest * {

                padding: 4px;

                margin: 2px auto;

            }

            .jTemplatesTest td, tr {

                border: 1px solid black;

            }

        .bcEEC {

            background: #EEC;

        }

        .bcCEE {

            background: #CEE;

        }

    </style>

</head>

<body style="zoom: 1;">

    <!-- Template content (Valid XHTML 1.1) -->

    <p style="display: none">

        <textarea id="template" rows="0" cols="0"><!--

            {*主模板*}

		{#template MAIN}

			{* this is a comment *}

			{$T.toString()} {* $T == $T.toSource() *}

			<table>

				{#foreach $T.table as record}

					{#include ROW root=$T.record}{*为子模板指定数据源，循环填充数据*}

				{#/for}

			</table>

		{#/template MAIN}

            {*嵌套子模板*}

		{#template ROW}

			<tr class="{#cycle values=['bcEEC','bcCEE']}">{*循环输出*}

					<td>{$T.name}</td>

					<td>{$T.mail}</td>

			</tr>

		{#/template ROW}

	--></textarea>

    </p>

    <!-- Output elements -->

    <div id="result1" class="jTemplatesTest">

    </div>

</body>

</html>

JTemplate学习（四）的更多相关文章

  1. TweenMax动画库学习(四)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  2. SVG 学习<四> 基础API

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  3. Android JNI学习(四)——JNI的常用方法的中文API

    本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...

  4. SCARA——OpenGL入门学习四（颜色）

    OpenGL入门学习[四] 本次学习的是颜色的选择.终于要走出黑白的世界了~~ OpenGL支持两种颜色模式:一种是RGBA,一种是颜色索引模式. 无论哪种颜色模式,计算机都必须为每一个像素保存一些数 ...

  5. ZigBee学习四 无线+UART通信

    ZigBee学习四 无线+UART通信 1) 协调器编程 修改coordinator.c文件 byte GenericApp_TransID; // This is the unique messag ...

  6. （转）SpringMVC学习(四)——Spring、MyBatis和SpringMVC的整合

    http://blog.csdn.net/yerenyuan_pku/article/details/72231763 之前我整合了Spring和MyBatis这两个框架,不会的可以看我的文章MyBa ...

  7. Spring Boot 项目学习 (四) Spring Boot整合Swagger2自动生成API文档

    0 引言 在做服务端开发的时候,难免会涉及到API 接口文档的编写,可以经历过手写API 文档的过程,就会发现,一个自动生成API文档可以提高多少的效率. 以下列举几个手写API 文档的痛点: 文档需 ...

  8. Expression Blend学习四控件

    原文:Expression Blend学习四控件 Expression Blend制作自定义按钮 1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点 ...

  9. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  10. Python基础学习四

    Python基础学习四 1.内置函数 help()函数:用于查看内置函数的用途. help(abs) isinstance()函数:用于判断变量类型. isinstance(x,(int,float) ...

随机推荐

  1. DRL 教程 | 如何保持运动小车上的旗杆屹立不倒？TensorFlow利用A3C算法训练智能体玩CartPole游戏

    本教程讲解如何使用深度强化学习训练一个可以在 CartPole 游戏中获胜的模型.研究人员使用 tf.keras.OpenAI 训练了一个使用「异步优势动作评价」(Asynchronous Advan ...

  2. express 3.5 Err: request aborted

    在处理app传过来的图片时遇到的,顾名思义,就是请求中断,图片在传输过程中遇到了网络不良问题,express 3.5 的中间件 bodyParser会在我们操作这些图片之前接收它们,接收过程中传输中断 ...

  3. webpack(2)--Entry

    Entry entry是配置模块的入口,可以抽象成输入,webpack执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块. 注意: entry是必填,若不填写则将导致webpack报错退出 ...

  4. python入门-测试代码

    断言 测试函数 def get_formatted_name(first,last): """generate a neatly formattef full name& ...

  5. smyfony2 增删改查

    1查询和修改

  6. 进程池(Pool)

    进程池用于进程维护, 当使用时,将会去进程池取数据 from multiprocessing import Pool, Processimport os, time def f(i): time.sl ...

  7. ABAP-SAP的LUW和DB的LUW的区别

    转载:http://www.cnblogs.com/helileng/archive/2010/10/14/1851409.html LUW是Logical Unit of Work,也就是逻辑工作单 ...

  8. UI5-文档-4.32-Routing with Parameters

    现在我们可以在overview和detail页面之间导航,但是我们在overview中选择的实际项目还没有显示在detail页面上.我们的应用程序的一个典型用例是在详细信息页面上显示所选项目的附加信息 ...

  9. 更改maven下载jar的仓库为阿里云仓库

    修改settings.xml <!-- 配置本地maven的仓库 --> <localRepository>D:\file\path\maven\repository</ ...

  10. 关于U3D场景烘焙的一个想法

    U3D进行场景烘焙时,发现阴影无法选择烘焙质量,其实想一下也合理,毕竟是烘焙,是将光照与阴影信息保存到lightmap中,因此阴影的质量取决于光照贴图的精度, 就算光照贴图再大,也远不可能达到实时光照 ...