kissy xtemplate
Post on 12-Sep-2014
542 views
Embed Size (px)
DESCRIPTION
Introduction to KISSY XTemplateTRANSCRIPT
-
KISSY xtemplate
-
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