jTemplates部分语法介绍
1.{#if}
{#if |COND|}..{#elseif |COND|}..{#else}..{#/if}
Examples:
{#if 2*8==16} good {#else} fail {#/if}
Return:
good
{#if $T.list_id == 5} good {#else} fail {#/if}
Return:
fail
(check 'data' below)
{#if $T.list_id} {$T.list_id} {#/if}
Return:
4
{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}
Return:
Users List
Code:
Data: (click to hide/show)
Results:
good
2.{#foreach}
Go for each element in table:
{#foreach |VAR| as |NAME| [begin=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}
{#else} and begin, count, step are optional.
Examples:
Write all names:
{#foreach $T.table as record} {$T.record.name} {#/for}
Result:
Anne Amelia Polly Alice Martha
Write names begin with second:
{#foreach $T.table as record begin=1} {$T.record.name} {#/for}
Result:
Amelia Polly Alice Martha
Write only two names begin with second:
{#foreach $T.table as record begin=1 count=2} {$T.record.name} {#/for}
Result:
Amelia Polly
Using step:
{#foreach $T.table as record step=2} {$T.record.name} {#/for}
Result:
Anne Polly Martha
Example with {#else}.
{#foreach $T.table as record begin=8} {$T.record.name} {#else} none {#/for}
Result:
none
Foreach set variables:
$index - index of element in table
$iteration - id of iteration (next number begin from 0)
$first - is first iteration?
$last - is last iteration?
$total - total number of iterations
$key - key in object (name of element) (0.6.0+)
$typeof - type of element (0.6.0+)
Example:
Template is long, so I copy it to file: example_foreach1.tpl
Usage:
$("#result").setTemplateURL('example_foreach1.tpl');
$("#result").processTemplate(data);
It should give result:
Index Iterator Name Age First? Last?
1 0 Amelia 24 true false
2 1 Polly 18 false false
3 2 Alice 26 false false
4 3 Martha 25 false true
New (0.7.8+):
Break and Continue:
Example 1: Skip item with id == 3
{#foreach $T.table as i}{#if $T.i.id==3}{#continue}{#/if}{$T.i.name}<br/>{#/for}
Anne
Amelie
Alice
Martha
Example 2: Break at element with id == 3
{#foreach $T.table as i}{#if $T.i.id==3}{#break}{#/if}{$T.i.name}<br/>{#/for}
Anne
Amelie
New (0.6.0+):
#foreach on object:
$('#result').setTemplate('{#foreach $T as i}{$T.i$key} - {$T.i}<br/>{#/for}');
$('#result').processTemplate({'a':1, 'b':2, 'c':3});
Variable $key display key for current element in object.
New (0.7.0+):
#foreach with function:
{#foreach |FUNC| as |NAME| [begin=|CODE|] [end=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}
Loop work till out of range (set by begin, end, count) or function |FUNC| return undefined/null.
Examples:
f = function(step) {
if(step
> 100)
return null;
// stop if loop is too long
return "Step " + step;
};
$("#result").setTemplate("{#foreach f as
funcValue begin=10 end=20} {$T.funcValue}<br/> {#/for}");
$("#result").processTemplate();
Step 10
Step 11
Step 12
Step 13
Step 14
Step 15
Step 16
Step 17
Step 18
Step 19
Step 20
Try remove end limit, loop will be break on index 100.
Please use this features with carefull!
Code:
Data: (click to hide/show)
Results:
Anne Amelie Polly Alice Martha
3.{#for}
Syntax:
{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}
Using as:
{#for |variable| = |start| to |end| [step=|stepBy|]}..{#else}..{#/for}
|variable| - name of variable, ex: i, index (please not use
javascript's reserved words).
|start| - loop begin value, ex: 1, $T.start
|end| - loop end value, ex: 10, $T.end
|stepBy| - step, ex: 1, -1 (downto)
Examples:
{#for index = 1 to 10} {$T.index} {#/for}
Result:
1 2 3 4 5 6 7 8 9 10
{#for index = 1 to 10 step=3} {$T.index} {#/for}
Result:
1 4 7 10
{#for index = 1 to 10 step=-3} {$T.index} {#else} nothing {#/for}
Result:
nothing
{#for index = 10 to 0 step=-3} {$T.index} {#/for}
Result:
10 7 4 1
$("#result").setTemplate("{#for index = $T.start to $T.end}
{$T.content}{$T.index}<br/> {#/for}");
$("#result").processTemplate({start: 2,
end: 5, content: "ID:
"});
ID: 2
ID: 3
ID: 4
ID: 5
Code:
Data: (click to hide/show)
Results:
Message: 1
Message: 2
Message: 3
Message: 4
Message: 5
Message: 6
Message: 7
Message: 8
4.
{#include}
Include other template.
{#include |NAME| [root=|VAR|]}
Examples:
var template1 = $.createTemplate('<b>{$T.name}</b>
({$T.age})');
$('#result').setTemplate('{#include t1 root=$T.table[0]}', {t1: template1});
$('#result').processTemplate(data);
Result:
Anne (22)
var template1 = $.createTemplate('<div><b>{$T.name}</b>
({$T.age})</div>');
$('#result').setTemplate('{#foreach $T.table as row}{#include t1 root=$T.row}{#/for}', {t1: template1});
$('#result').processTemplate(data);
Result:
Anne (22)
Amelia (24)
Polly (18)
Alice (26)
Martha (25)
Code:
Data: (click to hide/show)
Results:
Anne (22)
5.
multiple
templates
Since jTemplates 0.2 allowed is using multiple templates
in one file.
Example:
*** main template *** (all part outside templates are invisible}
{#template MAIN}
<div>
<div>{$T.name.bold()}</div>
{#include table root=$T.table}
</div>
{#/template MAIN}
-----------------------------------------
*** main table ***
{#template table}
<table>
{#foreach $T as r}
{#include row root=$T.r}
{#/for}
</table>
{#/template table}
-----------------------------------------
*** for each row ***
{#template row}
<tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
<td>{$T.name.bold()}</td>
<td>{$T.age}</td>
<td>{$T.mail.link('mailto:'+$T.mail)}</td>
</tr>
{#/template row}
Above template in file: example_multitemplate1.tpl
Subtemplates can use different setting than main one. Current implementation
does not allow to change most settings, like filter_data, etc, thus this
feature are not really useful. Example:
{#template item runnable_functions=false}
...
{#/template list}
Code:
Data: (click to hide/show)
Results:
User list
Anne |
22 |
|
Amelie |
24 |
|
Polly |
18 |
|
Alice |
26 |
|
Martha |
25 |
jTemplates部分语法介绍的更多相关文章
- Swift翻译之-Swift语法入门 Swift语法介绍
目录[-] Hello world - Swift 简单赋值 控制流 函数与闭包 对象和类 枚举与结构 协议和扩展 泛型 2014.6.3日,苹果公布最新编程语言Swift,Swift是一种新的编程语 ...
- flex弹性布局语法介绍及使用
一.语法介绍 Flex布局(弹性布局) ,一种新的布局解决方案 可简单.快速的实现网页布局 目前市面浏览器已全部支持1.指定容器为flex布局 display: flex; Webkit内核的浏览器, ...
- freemarker语法介绍及其入门教程实例
# freemarker语法介绍及其入门教程实例 # ## FreeMarker标签使用 #####一.FreeMarker模板文件主要有4个部分组成</br>#### 1.文本,直接输 ...
- QSS类的用法及基本语法介绍
QSS类的用法及基本语法介绍 目录 1. 何为Qt样式表2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式8.1. 相对定 ...
- MD基本语法介绍
Markdown基本语法介绍 前言 文本编辑器一般用的有富文本编辑器(也就是Word)和md了,但是wold太过于花里胡哨很多功能都用不上,所以就选择md了,简单实用,一对于我来说一般就用标题和列表就 ...
- Markdown 语法介绍
Markdown 语法介绍 from:https://coding.net/help/doc/project/markdown.html 文章内容 1 Markdown 语法介绍 1.1 标题 1.2 ...
- css基本概念与css核心语法介绍
css基本概念 css是什么?不需要了解太多文字类介绍,记住css是层叠样式表,HTML是页面结构,css负责页面样式,javascrt负责静态页面的交互.CSS 能够对网页中元素位置的排版进行像素级 ...
- c基本语法介绍
c语言基本语法介绍 1.把常量定义为大写字母形式,是一个很好的编程实践.
- [安卓基础]011存储数据(中)——sqlite语法介绍
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
随机推荐
- JavaScript dom 标签属性
节点: 平时开发中常用的节点是: 元素节点:nodeType值是 1 --> <a>,<p>...... 属性节点:nodeType值是 2 --> t ...
- 易懂 易上手的cookie 最简单明了 js中cookie的使用方法及教程
今天项目中需要用到cookie 看到我的cookie不行了 大喊一声我曹 怎么可以这样 我就疯狂的在网上找 找啊 找 但是我感觉都太官方了 废话不说 看栗子 1.引入jQuery与jQuery.C ...
- Windows操作系统下tomcat安装版图文教程
下载tomcat安装文件,官方下载地址是:http://tomcat.apache.org/,本文以tomcat-7.0.26版本为例进行安装过程的说明: 1.双击apache-tomcat-7.0. ...
- Vue.js入门
之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱 ...
- JS作用域面试题总结
关于JS作用域问题,是面试的时候面试官乐此不疲的面试题,有时候确实是令人抓狂,今天看到一个讲解这个问题的视频,明白了那些所谓的“原理”顿时有种豁然开朗的感觉~~~ 1.js作用域(全局变量,局部变量) ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(41)-组织架构
系列目录 本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当初设计的项目解决方案就是可伸缩可以拆离,可共享的项目解决方案.所以我们同时要添加App.Flow文件夹 ...
- 【原创】记一次Project插件开发
一.开发背景 最近在使用微软的Office Project 2010 进行项目管理,看到排的满满的计划任务,一个个地被执行完毕,还是很有成就感的.其实,不光是在工作中可以使用Project进行项目进度 ...
- 【分布式】Zookeeper客户端
一.前言 前篇博客分析了Zookeeper的序列化和通信协议,接着继续学习客户端,客户端是开发人员使用Zookeeper最主要的途径,很有必要弄懂客户端是如何与服务端通信的. 二.客户端 2.1 客户 ...
- Hadoop学习之旅一:Hello Hadoop
开篇概述 随着计算机网络基础设施的完善,社交网络和电商的发展以及物连网的推进,产生了越来越多的大数据,使得人工智能最近几年也有了长足的发展(可供机器学习的样本数据量足够大了),大数据的存储和处理也越来 ...
- React Native图片控件的使用
首先定义组件 import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native'; 然后将render返回中的模版增加I ...