# 模板语法 ## 变量 安全地显示一个变量 `{{ value }}`，或者获取变量属性 `{{ foo.bar }}`、`{{ foo['bar'] }}`，获取函数(async 函数) 的执行结果 `{{ fn() }}`； 对于变量为 undefined、null 将显示为空，无法访问或不存在的变量也会显示为空并且不会报错； 变量使用在 HTML 的文本节点中：`Hello {{ name }}`; 不能用于 HTML 标签内属性中。 ## 过滤器 通过通过管道操作符 `|` 调用过滤器，过滤器支持调用参数 `{{ value | upper }}`, `{{ value | default("empty") | lower }}`; ## 内建指令 指令依赖于 HTML 标签，减少了在书写模板时候的嵌套；指令默认前缀为 `kyber-`, 可以通过配置来修改； ### if 分支判断 ```html
Hello World
Something Wrong
OK!
``` ```javascript kyber.render('template.html', {show: true, error: false}); ``` 渲染结果为 ```html
Hello World
OK!
``` ### for 循环 ```html

{{ index }}. {{ item }}

{{ key }} - {{ value }}

``` ```javascript kyber.render('template.html', {list: ['foo', 'bar'], map: {user: 'join', age: 18}}); ``` 渲染结果为 ```html

0. foo

1. bar

user - join

age - 18

``` ### class 指令 ```html
Hello
``` ```javascript kyber.render('template.html', {className: ['foo', 'bar']}); // 或者使用对象表示 kyber.render('template.html', {className: {foo: true, bar: true, others: false}}); ``` 渲染结果为 ```html
Hello
``` ### style 指令 类似于 Class 指令 ```html

Hello

``` 渲染结果为 ```html

Hello

``` ### literal 指令 literal 指令会将 HTML 内部看待为纯文本，忽略 HTML 标签内的渲染； ```html

{{index}}. {{ item }}

``` 会原样渲染为 ```html

{{index}}. {{ item }}

``` ### strip 指令 strip 指令会忽略模板中空格进行渲染 ```html {{ mainTitle }} - {{ subTitle }} ``` ```javascript kyber.render('template.html', {mainTitle: "site name", subTitle: "page title"}); ``` 会渲染为 ```html site name - page title ``` ### 其他未定义指令 其他未定义指令不会报错，会解析 value 值为表达式 ```html
Hello
``` ```javascript kyber.render('template.html', {name: "button"}); ``` 会渲染为 ```html
Hello
``` ## 内建自定义标签 除了内建的一些指令外，模板继承，模板引用通过自定义标签来实现。自定义标签可以正常使用指令； ### template 标签 `