注释、自定方法、模板嵌套子模板、循环输出不同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. pig概述

    pig概述pig是一个用于并行计算的高级数据流语言和执行框架:类sql.文件处理框架:有一套和sql类似的执行语句,处理的对象是HDFS上文件.Pig的数据处理语言是数据流方式的,一步一步的进行处理: ...

  2. 开发组件：ZeroMQ

    ZeroMQ https://blog.csdn.net/w174504744/article/details/73187697

  3. PL/SQL 的一些用法

    变量的声明,赋值,打印(declare是pl/sql里面的用法 variable是sql*plus里面的用法,variable相当于一个sql*plus环境的全局变量,declare里定义的是pl/s ...

  4. PCB的初次窥探

    第一次画PCB经常用到的知识点 鼠标拖动+X      :左右转动(对称) +space:90度转动 +L      :顶层与底层的切换 Ctrl+M:测量 J + C:查找原件 交叉探针+原理图(P ...

  5. selenium+python自动化97--unittest参数化（paramunittest）

    前言 paramunittest是unittest实现参数化的一个专门的模块,可以传入多组参数,自动生成多个用例 前面讲数据驱动的时候,用ddt可以解决多组数据传入,自动生成多个测试用例.本篇继续介绍 ...

  6. Spring MVC 自定义类型转换器

    新建一个自定义转换器 import org.springframework.core.convert.converter.Converter; import org.springframework.s ...

  7. Reactjs 打包后 Tomcat 部署 404问题

    配置web.xml <error-page> <error-code>404</error-code> <location>/index.html< ...

  8. ASP.NET MVC+JQueryEasyUI1.4+ADO.NET Demo

    1.JQueryEasyUI使用 JQuery EasyUI中文官网:http://www.jeasyui.net/ JQuery EasyUI中文官网下载地址:http://www.jeasyui. ...

  9. C#连接sqlserver windows 和 sqlserver 身份验证的两种连接字符串

    //sql server 身份验证 连接字符串 private string ConnstrSqlServer = "server=服务器名称;uid=登录名称;pwd=登录密码;datab ...

  10. MIME(Multipurpose Internet Mail Extensions-多用途互联网邮件扩展)

    MIME MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型.是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时 ...