KISSY 模板机制

特性

  • 模板语法,从{{#tagName}}开始,由{{/tagName}}结束(如果有结束标签的话).
  • 模板变量,{{variable}}.
  • 原生支持 if/elseif/else/each/! 四个标签.
  • 支持嵌套.
  • 容错和调试.
  • 性能还不赖.
  • 容易扩展.

模板语法和范例

变量

变量支持JavaScript语法里的任何有返回值的语句,比如 name, user.name, user[0].name, 甚至可以使用方法, KISSY.one('#template').html()

语法


                    {{Variable}}
                

if 语句

语法


                    {{#if conditions}}
                    BLOCK
                    {{/if}}
                

范例


                    KISSY.Template('Hello, {{#if show}}{{name}}{{/if}})')
                    .render({show: true, name: 'Frank'});

                    Hello, Frank
                

else和elseif

语法


                    {{#if conditions}}
                    BLOCK
                    {{#elseif conditions}}
                    ELSEIF BLOCK
                    {{#else}}
                    ELSE BLOCK
                    {{/if}}
                

范例


KISSY.Template('Hello, {{#if showName}}{{name}}.{{#else}}{{nick}}{{/if}})')
.render({showName: false, name: 'Frank', nick: 'yyfrankyy'});

Hello, yyfrankyy.

KISSY.Template('Hello, {{#if name}}{{name}}.{{#elseif nick}}{{nick}}{{/if}})')
.render({name: 'Frank', nick: 'yyfrankyy'});

Hello, Frank.
                

else和elseif

语法


                    {{#if conditions}}
                    BLOCK
                    {{#elseif conditions}}
                    ELSEIF BLOCK
                    {{#else}}
                    ELSE BLOCK
                    {{/if}}
                

范例


KISSY.Template('Hello, {{#if showName}}{{name}}.{{#else}}{{nick}}{{/if}})')
.render({showName: false, name: 'Frank', nick: 'yyfrankyy'});

Hello, yyfrankyy.

KISSY.Template('Hello, {{#if name}}{{name}}.{{#elseif nick}}{{nick}}{{/if}})')
.render({name: 'Frank', nick: 'yyfrankyy'});

Hello, Frank.
                

each

循环读取某个变量,直接调用KISSY.each方法进行遍历.

语法


                    {{#each conditions}}
                    BLOCK
                    {{/each}}
                

范例


KISSY.Template('Hello, {{#each names}}<b color="{{_ks_value.color}}">'
                    +'{{_ks_value.name}}</b>{{/each}})')
.render({names: [{name: 'Frank', color: 'red'},
                    {name: 'yyfrankyy', color: 'green']});

Hello, <n>Frank</b><b color="green">yyfrankyy</b>
                

!

单行注释

语法


                    {{#! comments}}
                

范例


KISSY.Template('Hello, {{#! here you go.}}{{name}}.').render({name: 'Frank'});

Hello, Frank.
                

标签嵌套

理论上支持任意标签嵌套,如果标签有关闭字符,记得关闭=,=,嵌套标签形成多代码块嵌套,作用域与JavaScript的作用域一致.

语法


                    {{#each object}}
                    {{#if condition}}
                    BLOCK
                    {{/if}}
                    {{/each}}
                

范例


KISSY.Template('Hello, {{#each users}}'
                    +'{{#if _ks_value.show}}{{_ks_value.name}}'
                    +'{{/if}}{{/each}}.')
.render({users: [{show: false, name: 'Frank'},
                    {show: true, name: 'yyfrankyy'}]});

Hello, yyfrankyy.
                

讲起来有些枯燥,来看下示例吧,相信你一看就能明白: demo.html

home › template :