xtemplate的基础语法 ​

xtemplate所有的语法索引请看文档，这里只抽取核心语法进行讲解。

行内命令 与 块状命令 ​

行内命令 简单地理解就是可以一行写完的命令...比如{{name}}。

块状命令 就是需要多行结合才算完整的命令，比如{{#if}....{{else}}zzzz{{/if}}。

所有的块状命令起始都要加上 # ，比如{{#if}}。需要有结束标记 / ，比如{{/if}}。

简单的变量 ​

格式：{{变量}}，比如{{name}}，数据是{"name":"xtemplate"}，{{name}}会被替换成xtemplate。

如果数据中带有html标签呢？比如{"name":"<p>xtemplate</p>"}。

xtemplate会自动转译，输出的内容是 <p>xtemplate</p>。

如果希望不转译呢？可以使用{{{name}}}，这样就可以渲染数据中的html格式。

如果name字段不存在，{{name}} 渲染成空字符。

变量支持使用运算符 ​

比如：{{x+y}}，数据是{"x":1,"y":2}，渲染的结果会是3。

xtemplate还会自动转换变量类型为数值型，比如数据为 {"x":1,"y":"2"}，渲染的结果依旧是3，不会是12。

xtemplate 支持最常用的 + - * / % 运算符。

当然直接 {{x+1}}也是可以的，但不支持{{x--}}或{{x++}}的形式。

注释 ​

有时模板会很复杂，维护的需要我们需要加些注释，但我们不希望注释打印到页面中，如何处理呢？

使用 {{! 我是神奇的注释}}

if 条件判断 ​

if 块状命令由 {{#if()}}、{{elseif()}}（不是必须，else与if中间不要加空格）、{{else}}（不是必须，不要加 #）、{{/if}}组成。

运算符支持：===、!==、>、>=、<、<= 。

特别特别留意，判断相等使用===，不能使用==，这个细节不知道坑过多少人...

举例：数据

{{#if( x===1 )}}
        1
    {{elseif (x===2)}}
        2
    {{else}}
        3
    {{/if}}

留意，{{#if( x===1 )}} 中的()是不可省略的，这与旧的xtemplate不同。

渲染结果为2。

||、&&、!的使用 ​

有时判断条件比较复杂，比如同时判断x等于1，y等于2。

{{#if(x===1 && y===2)}}
    x等于1，y等于2
    {{/if}}

使用&&符号，当然“或”的判断可以使用||，“非”的判断使用!，比如{{#if(!x)}}。

有没有发现xtemplate语法跟js很相似！！！

使用if命令相当繁琐，有时还会写错，其实简单的字段存在性判断可以使用||、&&，比如：

{{name||"明河"}}

当name字段数据不存在时，默认输出“明河”。