xtemplate 使用示例

Note

推荐使用 离线编译

Class

Demos

支持简单的变量替换

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportVariable = function () {
        var tpl = 'this is {{title}}!';

        var data = {
            title: 'o'
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持 if 语句

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportIf = function () {
        var tpl = '{{#if title}}has title{{/if}}\n' +
            '{{@if title2}}has title2{{else}}not has title2{{/if}}';

        var data = {
            title: 'o',
            title2: ''
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持 if not 语句

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportIfNot = function () {
        var tpl = '{{^if title}}do not have title{{/if}}\n' +
            '{{^if title2}}do not have title2{{else}}have title2{{/if}}';

        var data = {
            title: '',
            title2: ''
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持 each 语句循环对象数组

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportEachObject = function () {
        var tpl = '{{#each data}}{{name}}-{{xindex}}/{{xcount}}|{{/each}}';

        var data = {
            data: [
                {
                    name: 1
                },
                {
                    name: 2
                }
            ]
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持 each 语句循环简单数组

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportEachArray = function () {
        var tpl = '{{#each data}}{{this}}-{{xindex}}/{{xcount}}|{{/each}}';

        var data = {
            data: [1, 2]
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持 each 中数据层次间的相对位置访问

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportParent = function () {
        var tpl = '{{#each data}}{{this}}-{{../total}}|{{/each}}';

        var data = {
            data: [1, 2],
            total: 3
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持 with 语句

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportWithObject = function () {
        var tpl = '{{#with data}}{{name}}-{{age}}{{/with}}';

        var data = {
            data: {
                name: 'h',
                age: 2
            }
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持 with 中数据层次间的相对位置访问

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportWithParent = function () {
        var tpl = '{{#with data}}' +
            '{{#with p}}' +
            '{{name}}-{{age}}-{{../l2}}-{{../../l1}}' +
            '{{/with}}' +
            '{{/with}}';

        var data = {
            l1: 1,
            data: {
                l2: 2,
                p: {
                    name: 'h',
                    age: 2
                }

            }
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持注释

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportComment = function () {
        var tpl = 'my {{!\n' +
            'comment' +
            '\n}} {{title}}';

        var data = {
            title: 'oo'
        };


        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持转义括号

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportEscape = function () {
        var tpl = 'my {{!\n' +
            'comment' +
            '\n}} \\{{title}}{{title}}';

        var data = {
            title: 'oo'
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持 html 转义

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportEscapeHtml = function () {
        var tpl = 'my {{title}} is {{{title}}}';

        var data = {
            title: '<a>'
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持全局行内命令扩展

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportGlobalCommand = function () {
        XTemplate.addCommand('global', function (scopes, option) {
            return 'global-' + option.params[0];
        });

        var tpl = 'my {{global title}}';

        var data = {
            title: '1'
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持全局块状命令扩展

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportGlobalBlockCommand = function () {
        XTemplate.addCommand('global2', function (scopes, option) {
            return 'global2-' + option.fn(scopes);
        });

        var tpl = 'my {{#global2}}{{title}}{{/global2}}';

        var data = {
            title: '1'
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持局部行内命令扩展

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportLocalCommand = function () {
        var tpl = 'my {{global3 title}}';

        var data = {
            title: '1'
        };

        var render = new XTemplate(tpl, {
            commands: {
                'global3': function (scopes, option) {
                    return 'global3-' + option.params[0];
                }
            }
        }).render(data);

        alert(render);
    };

});

演示:

支持局部块状命令扩展

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportLocalBlockCommand = function () {
        var tpl = 'my {{#global4}}{{title}}{{/global4}}';

        var data = {
            title: '1'
        };

        var render = new XTemplate(tpl, {
            commands: {
                'global4': function (scopes, option) {
                    return 'global4-' + option.fn(scopes);
                }
            }
        }).render(data);

        alert(render);
    };

});

演示:

局部后缀名判断命令扩展

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.endsWithCommand = function () {
        var tpl = '{{d}} ends with {{#endsWith d "jpg"}}jpg{{/endsWith}}' +
            '{{#endsWith d "gif"}}gif{{/endsWith}}';

        var data = {
            d: 'x.jpg'
        };

        var render = new XTemplate(tpl, {
            commands: {
                'endsWith': function (scopes, option) {
                    return S.endsWith(option.params[0], option.params[1]) ? option.fn(scopes) : '';
                }
            }
        }).render(data);

        alert(render);
    };

});

演示:

支持简单表达式作为变量

目前支持 + - * / %

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportExpressionVariable = function () {
        var tpl = '{{n+3*4/2}}';

        var data = {
            n: 1
        };

        var render=new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持关系表达式

目前支持 === !== > >= < <=

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportRelationalExpression = function () {
        var tpl = '{{#if n>n2+4/2}}' +
            '{{n+1}}' +
            '{{else}}' +
            '{{n2+1}}' +
            '{{/if}}';

        var tpl3 = '{{#if n===n2+4/2}}' +
            '{{n+1}}' +
            '{{else}}' +
            '{{n2+1}}' +
            '{{/if}}';


        var tpl4 = '{{#if n!==n2+4/2}}' +
            '{{n+1}}' +
            '{{else}}' +
            '{{n2+1}}' +
            '{{/if}}';


        var data = {
                n: 5,
                n2: 2
            }, data2 = {
                n: 1,
                n2: 2
            },
            data3 = {
                n: 4,
                n2: 2
            };

        alert(new XTemplate(tpl).render(data));

        alert(new XTemplate(tpl).render(data2));

        alert(new XTemplate(tpl3).render(data3));

        alert(new XTemplate(tpl4).render(data3));
    };

});

演示:

支持 each 中的关系表达式

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportRelationalExpressionEach = function () {
        var tpl = '{{#each data}}' +
            '{{#if this>../limit+1}}' +
            '{{this+1}}-{{xindex+1}}-{{xcount}}|' +
            '{{/if}}' +
            '{{/each}}' +
            '';

        var data = {
            data: [11, 5, 12, 6, 19, 0],
            limit: 10
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持 with 中的关系表达式

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportRelationalExpressionWith = function () {
        var tpl = '{{#with data}}' +
            '{{#if n>../limit/5}}' +
            '{{n+1}}' +
            '{{/if}}' +
            '{{/with}}' +

            '';

        var data = {
            data: {
                n: 5
            },
            limit: 10
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持 set 设置变量

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportSet = function () {
        var tpl = '{{#each data}}' +
            '{{set n2=this*2 n3=this*3}}' +
            '{{n2}}-{{n3}}|' +
            '{{/each}}';

        var data = {
            data: [1, 2]
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持 mustache 形式的 object

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportMustacheObject = function () {
        var tpl = '{{#data}}{{name}}-{{age}}{{/data}}';

        var data = {
            data: {
                name: 'h',
                age: 2
            }
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持 mustache 形式的 array

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportMustacheArray = function () {
        var tpl = '{{#data}}{{name}}-{{xindex}}/{{xcount}}|{{/data}}';

        var data = {
            data: [
                {
                    name: 1
                },
                {
                    name: 2
                }
            ]
        };

        var render = new XTemplate(tpl).render(data);

        alert(render);
    };

});

演示:

支持未闭合标签报错

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportDetectUnclosed = function () {
        var tpl = '{{#if title}}\n' +
            'shoot\n' +
            '';

        var data = {
            title: 'o'
        };

        try {
            new XTemplate(tpl).render(data);
        } catch (e) {
            alert(e);
            throw e;
        }
    };

});

演示:

支持不存在属性警告

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportWarnAboutMissing = function () {
        var log = S.log, msg2 = '';

        var tpl = 'this is \n' +
            '{{title}}';

        var data = {
            title2: 1
        };

        var render = new XTemplate(tpl).render(data);

        // 打开控制台
        alert(render);
    };

});

演示:

打开控制台

支持标签不匹配报错

代码:

KISSY.use('xtemplate', function (S, XTemplate) {

    window.supportDetectUnMatch = function () {
        var tpl = '{{#if n===n1}}\n' +
            'n eq n1\n' +
            '{{/with}}';

        var data = {
            n: 1,
            n1: 2
        };

        try {
            new XTemplate(tpl).render(data);
        } catch (e) {
            alert(e);
            throw e;
        }
    };

});

演示: