注释、自定方法、模板嵌套子模板、循环输出不同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. ffmpeg 播放音频

    播放音频,设置好SDL_AudioSpec播放参数,然后由SDL回调函数进行解码和数据的拷贝,解码播放音频无需设置延迟,因为声卡播放音频是阻塞的 int audio_decode_frame(AVCo ...

  2. sqoop产生背景及概述

    sqoop产生背景 多数是用Hadoop技术处理大数据业务的企业有大量的数据存储在传统的关系型数据库(RDBMS)中:由于缺乏工具的支持.对Hadoop和传统数据库系统中的数据进行相互传输是一件十分困 ...

  3. PHP mysqli_autocommit() 函数

    定义和用法 mysqli_autocommit() 函数开启或关闭自动提交数据库修改. 提示:请查看 mysqli_commit() 函数,用于提交指定数据库连接的当前事务.请查看 mysqli_ro ...

  4. IP分组交付和转发

    1:交付 网络层监视底层物理网络对分组的处理过程叫做交付,分为直接交付和间接交付 1.1:直接交付 直接交付时,分组的终点是一台与交付着连接在同一个网络上的主机,发生在俩种情况下,分组的源点和终点都在 ...

  5. OpenACC Julia 图形

    ▶ 书上的代码,逐步优化绘制 Julia 图形的代码 ● 无并行优化(手动优化了变量等) #include <stdio.h> #include <stdlib.h> #inc ...

  6. linux 基本。。

    一. 将磁盘分区挂载为只读 这一步很重要,并且在误删除文件后应尽快将磁盘挂载为只读.越早进行,恢复的成功机率就越大. 1.  查看被删除文件位于哪个分区 [root@localhost  ~]# mo ...

  7. 20. orcle中统计一个字符串中某个字符的长度

    例子1:统计一个字符串中“,”的个数: select lengthb(regexp_replace('[a,b,c,d,e,f]','[^,]',null))  as res from dual; 例 ...

  8. delphi c++builder JSON 生成与解析 例子

    json,System.JSON,REST.JSON JSON有两种数据结构,对象和数组. 对象在js中表示为“{}”括起来的内容,数据结构为 {key:value,key:value,...} 数组 ...

  9. c++builder XE6 Remote Debuger 远程调试

    1.远程目标机器 安装D:\Program Files (x86)\Borland\Remote Debugger\20,没有光盘从已安装的xe6电脑上Bin目录下拷贝文件 bccide.dll bo ...

  10. jsfl 巧用获取jsfl绝对路径，导入配置文件，注意配置文件无法改变舞台宽高

    //获取jsfl下的AS3.xml配置文件的路径 var jsflURL_arr=fl.scriptURI.split("/"); jsflURL_arr.splice(jsflU ...