周陆军博客

Appearance

On this page

xtemplate 自定义命令 ​

xtemplate 拥有强大的拓展性，你可以自己定义行内命令和块状命令。

自定义行内命令 ​

比如我们可以定义个常用的金额格式化命令 money()：

html
XTemplate.addCommand('money',function(scope, option){
        return moneyFormat(option.params[0],option.params[1]);
    });

使用addCommand()方法注册自定义命令，如果是 XTemplate.addCommand() 注册的是全局命令，注册局部命令：

javascript
var xtpl = new XTemplate(tpl);
    xtpl.addCommand();
    xtpl.render({});

局部命令只会对 XTemplate 的实例有效。

html
addCommand() 第一个参数为命令名称，第二个参数为命令逻辑函数。

option.params 即外部传参的值，比如 `{{money(price,2)}},option.params[0]` 指向price数据，`option.params[1]=2`。

自定义块状命令 ​

javascript
XTemplate.addCommand('msg', function (scopes, option,buffer) {
        html = '<div class="msg">'+option.params[0]+'</div>';
        return option.fn(scopes,buffer).write(html);
    });

此命令会向指定的input后追加一个消息容器。

模板内容：

html
{{#msg(text)}}
        <input name="name" type="input">
    {{/msg}}

自定义块状命令会复杂些。需要使用 buffer 参数，用于处理模板内容。

option.fn(scopes,buffer) 返回的是 buffer （带有html内容），使用write()可以追加内容。