kissy xtemplate

Click here to load reader

Post on 12-Sep-2014

541 views

Category:

Technology

3 download

Embed Size (px)

DESCRIPTION

Introduction to KISSY XTemplate

TRANSCRIPT

  • KISSY xtemplate

    [email protected]

  • KISSY xtemplate

    Another Template Engine

    Docs: http://docs.kissyui.com/docs/html/api/componen

    t/xtemplate/

    Development Source: https://github.com/kissyteam/kissy/tree/master/s

    rc/xtemplate

  • /

  • {{x}}

    {{{x}}}

  • + - * / %

    && || === >= 2}}

  • {{#if}}{{/if}}

    {{#each}}{{xindex}}{{this}}{{/each}}

    {{#with obj}}{{y}}{{/with}}

    obj.y.z

  • {{#with y}}{{../../x}}{{x}}{{/each}}

    {

    x: 1,

    y: {

    x: 2

    }

    }

  • {{myCommand 1 2 3 4 x x+2 x*3}} {{#my xx}}{{x}}{{y}}{{/my}}

    function myCommand(scopes,option){

    option.params //=> [x,1] option.hash // {y:2} scopes.unshift({ xindex: 1}); html+option.fn(scopes,)+end return xxx; }

  • {{include x-tpl}}

    x-tpl

    {{x}}

    1.3

    Xtemplate.addSubTpl(x-tpl,{{x}})

  • range

    {{set x=1}}

    Array [1 .. 10]

    {{#range x y}}{{/range}}

  • {{x}}\n{{y

    xx.tpl

    {{x}}\n{{y

    ------------^ unclosed error at line 2

  • {{mustache}}

  • Open

    Id

    operator

  • lalr

    Program

    Statement xx

    Tpl {{x}}

  • kison

    https://github.com/kissyteam/kissy/tree/master/src/kison

    + -> kison -> parse.js

  • parser.js

    module

    parse()

    parse(my\n{{x}})

    program

    Content:

    line:1

    value: my\n

    tpl:

    line:2

    Id:

    line:2

    value: x

  • js

    var source = var out=[];;

    If(node.type == id){

    source+=out.push(context.+ node.name+);

    } else { }

    source+=return out.join();;

  • {{my}}

    new Function(context, source)({my:1});

  • xtemplate/compiler

    xemplate runtime

    xtemplate requires [compiler, runtime]

  • {{include x/y}}

    x/y.js

    KISSY.add(x/y, {{x}}{{include x/z}},{requires:[x/z]});

  • extend

    Layout.tpl {{header}}

    {{#override content}}{{x}}{{/override }}

    - Item2.tpl

    {{extend layout}}

    Item1.tpl {{extend layout}}

    {{#override content}} {{x}}{{/override }}

  • Java/php

    Js

  • Range

    python django jinja2

    jade