注释、自定方法、模板嵌套子模板、循环输出不同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. java实现远程控制

    屏幕监控: Robot robot = new Robot();Dimension d = Toolkit.getDefaultToolkit().getScreenSize();image = ro ...

  2. Python3 os模块应用

    调用模块的实质是运行python代码,比如a.py文件里有函数f(),那么你在调用a模块的时候,实质是运行了a模块里的函数f(),这个时候内存里就有这个函数了,可以直接用,那是不是随便一个py类型的文 ...

  3. 在 Linux 下使用mdadm创建 RAID 5

    在 RAID 5 中,数据条带化后存储在分布式奇偶校验的多个磁盘上.分布式奇偶校验的条带化意味着它将奇偶校验信息和条带化数据分布在多个磁盘上,这样会有很好的数据冗余. 在 Linux 中配置 RAID ...

  4. ajax 使用 三种方法 设置csrf_token的装饰器

    1. CSRF中间件   CSRF跨站请求伪造 2. 补充两个装饰器  from django.views.decorators.csrf import csrf_exempt, csrf_prote ...

  5. IDEA设置syso快捷键输出System.out.println();

    用Eclipse时间长了, 就习惯之前的快捷键! 当然, IDEA不愧是Java开发的”利器”! 写起代码就是一个字 – “爽”! 建议大家可以去尝试一下! 当然, 在IDEA中输出System.ou ...

  6. leetcode976

    public class Solution { public int LargestPerimeter(int[] A) { var list = A.OrderByDescending(x => ...

  7. Tomcat 异常关闭排查

    N次请求 tomcat conf/server.xml https://blog.csdn.net/qq_30121245/article/details/52861935 pattern分析 %a ...

  8. 前端开发-2-HTML-head标签

    browser英 /'braʊzə/ 美 /'braʊzɚ/ 浏览器 explorer英 /ek'splɔːrə(r)/ 美 /ɪk'splɔrɚ/ 探险者,资源管理器 1.index 2.head标 ...

  9. Java LinkedList的实现原理

    LinkedList是Java List类型的集合类的一种实现,此外,LinkedList还实现了Deque接口.本文基于Java1.8,对于LinkedList的实现原理做一下详细讲解. (Java ...

  10. javascript 函数对象

    http://hi.baidu.com/gdancer/blog/item/a59e2c12479b4e54f919b814.html jQuery的一些写法就是基于这篇文章的原理的..     函数 ...