xtemplate: 更强大的模板引擎

[yiminghe]

需求收集

1. 增加错误提示
2. 没有逻辑固然好，但是不那么实用

语法

{{variable}}

模板：
this is {{title}}

数据：
{ title:'my' }

渲染：
this is my

{{#if condition}} {{else}} {{/if}}

condition 可进一步 > = < >= <= 等简单判断以及 * + - / ^

模板：
this is {{#if show}}{{title}}{{/if}}

数据：
{ title:'my' ,show:0}

渲染：
this is

{{#ifeq}}

模板：
this is {{#if show1 == =show2}}{{title}}{{/if}}

数据：
{ title:'my' ,show1:0,show2:0}

渲染：
this is my

expression

{{#if a>b+1}}

{{a+2}}

模板：
this is
{{#each datas}}
{{key}} : {{value}}
{{/each}}

数据：
{ datas:[{key:1,value:2},{key:3,value:4}]}

渲染：
this is my : 1 u : 2

{{#with data}} {{/with}}

进一步支持 {{../x}}

模板：
this is
{{#with datas}}
{{my}} {{u}}
{{/with}}

数据：
{ datas:{ my:1,u:2 }}

渲染：
this is 1 2

{{! comment }}

模板：
this is {{! haha }}

数据：
{ datas:{ my:1,u:2 } }

渲染：
this is

{{#include}}

详见： addSubTemplate

escape syntax

模板：
my {{test}}

数据：
{test:2}

渲染：
my {{test}}

api

渲染

KISSY.Template('this is {{title}}').render({title:'2'}) // => this is 2

自定义命令

KISSY.Template.addCommand('linkfy',function(url){return '<a>'+url+_'</a>';});

KISSY.Template('this is {{linky url}}').render({url:'http://www.g.cn'}) 
// => this is <a>http://www.g.cn</a>

KISSY.Template.addCommand('if_less',function(num,num2,option){
  return num>num2?option.fn(option.context):option.inverse(option.context);
});

KISSY.Template('this is {{#if_less num1 num2}}{{url}}{{/if_less}}')
.render({url:'http://www.g.cn',num1:3,num2:2}) // => this is http://www.g.cn

子模板

KISSY.Template.addSubTemplate('header','i am {{head}}');

KISSY.Template('{{#include "header"}}').render({head:'2'}) 
// => i am 2

KISSY.Template.addSubTemplate('header2',function(all,context){
    return context.head;
    // 可进一步 KISSY.Template().render(context);
});

KISSY.Template('{{#include "header2" head="3"}}').render({head:'2'}) 
// => i am 3

预编译

// 离线编译
var fn = KISSY.Template.compile() ;//=> function
// 使用
KISSY.Template(fn).render(data);

KISSY 模块化机制结合

a 模板：

{{#include 'xx'}} {{title}}

xx 模板:

{{content}}

编译后生成两个模块：

a:

KISSY.add("t/a",function(S,Template){
    var a = new Template(function(){ .... });
    Template.addSubTemplate("a",function(context){
        return a.render(context); 
    }); 
    return a;
},{
  requires:['template','./xx']
});

xx:

KISSY.add("t/xx",function(S,Template){
    var x = new Template(function(){ .... });
    Template.addSubTemplate("xx",function(context){
        return x.render(context); 
    }); 
    return x;
},{
  requires:['template']
});

kissy template 对比：

优势

• 不会莫名其妙报错（with）
• 更多出错信息，直接给出行号
• 更容易扩展 command,sub-tpl
• 支持子模板
• 支持作用域链
• 内置 escapeHTML 支持
• 支持预编译

劣势

• 不支持复杂表达式
• 不支持复杂比较操作
• 不支持 js 语法

refer

handlebar

closure template

velocity

XTemplate

[akecn]

目前1.2.0的不支持@作为标识符。。但是我看代码是有的，不知道什么时候能推过去。。。

[yiminghe]

@akecn

1.2 不改了，这个很简单的， 你

vm 里写 {{@

S.one(xx").html().replace(/{{@/g,'{{#') 下就可以兼容了

[akecn]

这个知道呢，只是既然代码上已经支持了，为什么不推送一下呢？是有其他什么原因？

[yiminghe]

初步 ast ok：
http://docs.kissyui.com/kissy/src/kison/demo/template/demo/simple.html

[yiminghe]

changed to xtemplate:

de15b33

[yiminghe]

temporary over: https://github.com/kissyteam/kissy/blob/master/src/xtemplate/impl.md