xtemplate 简介

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,535评论 19 139
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,271评论 0 1
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,538评论 0 13
  • 如何判断自己是否是100分的呢?当你没有或假如你没有一个伴侣的时候,你是否依然可以活得怡然自得? 当你面对不完美的...
    自我觉察日记本阅读 411评论 0 0

友情链接更多精彩内容