XTemplate 是富逻辑的 KISSY 模板引擎,面向复杂的业务逻辑场景,同时保持高性能和丰富的配置方法,是易学易懂的模板语言。
KISSY XTemplate 语法
{{key}}变量替换
使用{{key}}输出变量值,key表示要替换的JSON中的key,替换为JSON中key对应的value。比如XTemplate:
this is {{title}}!
要填充的JSON对象:
{
title:'Kissy'
}
拼装结果为:
this is Kissy!
{{if condition}}条件语句
使用{{if condition}}来实现条件判断,condition表示要判断的值,判断是否存在、为空、是否为falsy。比如模板为:
{{#if title}}
has title
{{/if}}
{{@if title2}}
has title2
{{else}}
not has title2
{{/if}}
要填充的JSON对象:
{
title:'kissy',
title2:''
}
填充结果为:
has title
not has title2
其中{{#if}}和{{@if}}完全等价,在某些环境中(比如velocity)里#有特殊语义,这时可以用@作为if前缀。
此外,title的取值不为这些值时被认为是真值:0,null,'',false,NaN,undefined。当取值为空数组[]或空对象'{}'时,则认为是真值。
{{^if condition}}条件非语句
使用{{^if condition}}来实现条件非,如果condition值为空或者假值(0, null, '', false, NaN, undefined),则此语句为 true。如果condition有值且是真值,语句为 false。比如这段 XTemplate 模板:
{{^if title}}
do not has title
{{/if}}
{{^if title2}}
do not has title2
{{else}}
has title2
{{/if}}
填充的JSON为:
{
title:undefined,
title2:''
}
填充结果为:
do not has title
do not has title2
{{#each}}循环语句
循环对象数组
使用{{#each data}}表示循环,data表示循环的对象,数组类型,每个item为一个对象,比如这段 XTemplate:
{{#each data}}
{{name}}-{{xindex}}/{{xcount}}
{{/each}}
如果填充的JSON为数组类型:
{
data:[
{name:1},
{name:2}
]
}
渲染结果为:
1-0/2
2-1/2
这时循环内的{{xindex}}表示循环的索引值,{{xcount}}表示循环的总次数,{{name}}是数组中每个对象的属性name,替换为属性的值
循环单数组
循环的data为数组类型,每个item为一个值,而非对象,比如这段XTemplate:
{{#each data}}
{{this}}-{{xindex}}/{{xcount}}
{{/each}}
要填充的JSON对象为:
{
data:['jayli','yiminghe']
}
渲染结果为:
jayli-0/2
yiminghe-1/2
其中循环内的{{this}}表示当前循环的item值,{{xindex}}和{{xcount}}含义同上
具体可参考这篇博客 https://www.cnblogs.com/fuland/p/4041023.html