<!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/example2.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' }

                ]

            };

            // Localize data 模板参数

            var lang = {};

            lang['en'] = {

                'id': 'ID',

                'name': 'Name',

                'mail': 'E-Mail',

                'language': 'english'

            };

            lang['pl'] = {

                'id': 'ID',

                'name': 'Nazwisko',

                'mail': 'Adres e-mail',

                'language': 'polski'

            };

            // attach the template 加载模板

            $(".jTemplatesTest").setTemplateElement("template");

            // set parameter 'lang' 为模板指定参数，调用参数用 $P

            $("#result1").setParam('lang', lang['en']);

            $("#result2").setParam('lang', lang['pl']);

            // process the template 填充数据 调用数据用 $T

            $(".jTemplatesTest").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 {

                background: #EEE;

                border: 1px solid black;

            }

    </style>

</head>

<body style="zoom: 1;">

    <!-- Template content -->

    <textarea id="template" style="display: none">

        <div>{$T.name}: {$T.list_id} [{$P.lang.language}]</div>

		<table>

			<thead style="font-weight: bold">

				<tr>

					<td>{$P.lang['name']}</td>

					<td>{$P.lang['mail']}</td>

				</tr>

			</thead>

			<tbody>

				{#foreach $T.table as record}

				<tr>

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

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

				</tr>

				{#/for}

			</tbody>

		</table>

	</textarea>

    <!-- Output elements -->

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

    </div>

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

    </div>

</body>

</html>

为模板指定参数

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

  1. emberjs学习二(ember-data和localstorage_adapter)

    emberjs学习二(ember-data和localstorage_adapter) 准备工作 首先我们加入ember-data和ember-localstorage-adapter两个依赖项,使用 ...

  2. ReactJS入门学习二

    ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...

  3. TweenMax动画库学习(二)

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

  4. Hbase深入学习(二) 安装hbase

    Hbase深入学习(二) 安装hbase This guidedescribes setup of a standalone hbase instance that uses the local fi ...

  5. Struts2框架学习(二) Action

    Struts2框架学习(二) Action Struts2框架中的Action类是一个单独的javabean对象.不像Struts1中还要去继承HttpServlet,耦合度减小了. 1,流程 拦截器 ...

  6. Python学习二：词典基础详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyib ...

  7. Quartz学习--二 Hello Quartz! 和源码分析

    Quartz学习--二  Hello Quartz! 和源码分析 三.  Hello Quartz! 我会跟着 第一章 6.2 的图来 进行同步代码编写 简单入门示例: 创建一个新的java普通工程 ...

  8. SpringCloud学习(二)：微服务入门实战项目搭建

    一.开始使用Spring Cloud实战微服务 1.SpringCloud是什么? 云计算的解决方案?不是 SpringCloud是一个在SpringBoot的基础上构建的一个快速构建分布式系统的工具 ...

  9. DjangoRestFramework学习二之序列化组件、视图组件 serializer modelserializer

      DjangoRestFramework学习二之序列化组件.视图组件   本节目录 一 序列化组件 二 视图组件 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 序列化组 ...

  10. SpringMVC入门学习(二)

    SpringMVC入门学习(二) ssm框架 springMVC  在上一篇博客中,我简单介绍了一下SpringMVC的环境配置,和简单的使用,今天我们将进一步的学习下Springmvc的操作. mo ...

随机推荐

  1. css 元素选择器实例

    一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式.本文章向码农介绍css 标签/元素选择器以及其实例,需要的码农可以参考一下. [标签选择器] 一个完整 ...

  2. 小朋友学C语言（7）

    数组 一.数组简介 C 语言支持数组数据结构,它可以存储一个固定大小的相同类型元素的顺序集合.数组是用来存储一系列数据,但它往往被认为是一系列相同类型的变量. 数组的声明并不是声明一个个单独的变量,比 ...

  3. 安装MegaCli，查看linux服务器raid信息

    1.下载安装包 下载地址:https://raw.githubusercontent.com/crazy-zhangcong/tools/master/MegaCli8.07.10.tar.gz 2. ...

  4. redis详解（四）-- 高可用分布式集群

    一,高可用 高可用(High Availability),是当一台服务器停止服务后,对于业务及用户毫无影响. 停止服务的原因可能由于网卡.路由器.机房.CPU负载过高.内存溢出.自然灾害等不可预期的原 ...

  5. DEMO: springboot 与 freemarker 集成

    直接在 DEMO: springboot 与 mybatis 集成 基础上,进行修改. 1.pom.xml 中引用 依赖 <dependency> <groupId>org.s ...

  6. django-allauth 使用

    参考: http://www.honkerzhou.com/post/3/ https://www.jianshu.com/p/41335d861a8d https://django-allauth. ...

  7. shift 参数移位

    更改批处理文件中可替换参数的位置. SHIFT [/n] 如果命令扩展名被启用,SHIFT 命令支持/n 命令行开关:该命令行开关告诉命令从第 n 个参数开始移位:n 介于零和八之间.例如: SHIF ...

  8. JS 时间 获取 当天,昨日,本周,上周,本月,上月

    调用 setTimeRange (2); function  setTimeRange (v) { var fmt = 'YYYY-MM-DD HH:mm'; var now = new Date() ...

  9. 编写jQuery插件（一）——插件约定及插件中的闭包

    编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护. 在编写jQuery插件的时候,我们一般会遵循一些约定: jQuery插件推荐命名为:jque ...

  10. 登陆sharepoint的主页，提示：文件存在(异常来自 HRESULT:0x80070050)

    用sharepoint搭建了Project2007的服务器之后,由于我们公司管理域的服务器崩溃了,必须重新再加一次域,而域和服务器是关联的,即使域的名字一样,但该名字所对应的ID是不一样的,会导致一些 ...