注释、自定方法、模板嵌套子模板、循环输出不同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. 蓝瓶的钙，好喝的钙——windows,我要蓝屏的

    原文地址:http://80x86.io/post/windows-blue-screen-0x00000050-page_fault_in_nonpaged_area 这里只截取一部分. windo ...

  2. 学习MongoDB 八： MongoDB索引（索引限制条件）（二）

    一.简介 我们上一篇介绍了索引基本操作,通过db.collection.createIndex(keys, options)语法创建索引,我们继续介绍地理空间索引.索引的限制,使我们在MongoDB时 ...

  3. Coxph model Pvalue Select2

    4   1) Put summary(coxphobject) into a variable summcph <- summary(coxphobject) 2) examine it wit ...

  4. paycharm导入webdriver包报错：module 'selenium.webdriver' has no attribute 'Firefox'

    首先:试试看在cmd中试试输入from selenium import webdriver,看是否报错,看一看是不是pycharm的原因.经过确认,在dos窗口中输入导入包的命令并没有报错.最后我重现 ...

  5. 好用的 FTP 软件之 FileZilla 技巧教程

    FTP 软件之 FileZilla教程 使用教程参考:http://163.26.161.1/~yilinteacher/wwwict/flash/FileZilla.swf (1)如何设置传输完成后 ...

  6. openstack 基镜像与差异镜像的整合

  7. leetcode268

    public class Solution { public int MissingNumber(int[] nums) { var list = nums.OrderBy(x => x).To ...

  8. JS 操作 file标签只上传照片

    在当前高版本浏览器里 在标签里加这个属性就够用了 accept="image/*" $('input[type="file"]').live('change', ...

  9. vue深入了解组件——处理边界情况

    一.访问元素&组件 在绝大多数情况下,我们最好不要触达另一个组件实例内部或手动操作DOM元素.不过也确实在一些情况下做这些事情是合适的. 1.1 访问根实例 在每个 new Vue 实例的子组 ...

  10. 编写ios和android共用的c/c++库时 使用iconv的问题(转)

    因为在项目中需要同时维护ios和Android,不同的代码不利于开发的便捷和以后的维护,所以在最近的一个项目中,两种手机应用的通信部分打算使用c/c++库来统一编写,ios调用.a静态库,androi ...