<!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. Web 单元测试

    问题描述: The import org.junit.Test conflicts with a type defined in the same file 导入的org.junit.Test和一个相 ...

  2. php while循环控制实例讲解

    while循环是PHP中最简单的循环,其基本格式为: while (expr){ statement } 或者 while (expr): statement endwhile; 该语法表示,只要ex ...

  3. setTimeout 方法带参数传递

    setTimeout(callback, after, arg1, arg2); 其中,callback即function(){},after为时间参数,指多久后执行callback,单位为毫秒,30 ...

  4. PyCharm License Activation激活码失效问题的解决方法

    自己的小Python项目好几天没有写了,今天打开PyCharm准备继续写,突然发现之前的激活码被取消不能用了,本来激情满满的准备干活啦!之前搜的这个激活码本来说的是可以用到18年1月份的呢,哎…心情是 ...

  5. 20180130之PYTHON学习笔记【PYTHON3写个自动听课功能】

    -----------------------原始实现想法------------ import pyautoguifrom PIL import Image#img=Image.open('c:/p ...

  6. 委托学习过程及委托、Lambda表达式和匿名方法的关系总结及事件总结

    第一章,当开始学习委托的时候,我们会问什么是委托?为什么要学习委托? 一,什么是委托? 委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递,这种将方法动态地赋给参数的做法, ...

  7. linux7系统开机报错failed to start login service

    1.开机报错failed to start login service 参考网站:https://unix.stackexchange.com/questions/264994/kali-sudden ...

  8. awk分割字符串

    想从目标字符串中,提取想要的字符,可以用awk命令. 例如: 从<version>1.3.1-SNAPSHOT</version>中提取版本号,则可以用命令:awk -F'[& ...

  9. AS3 在不规则区域内拖动

    原理: 1.确保拖动对象在鼠标点上,如果不确定会出现瞬间移动的感觉 2.确保触碰到非通行区域,跳回到没触碰的点 源码: import flash.events.MouseEvent; import f ...

  10. windows平台下 c++获取 系统版本 网卡 内存 CPU 硬盘 显卡信息<转>

    GetsysInfo.h: #ifndef _H_GETSYSINFO #define _H_GETSYSINFO #pragma once #include <afxtempl.h> c ...