08art-template回顾

改模板已经进行更新，分为标准语法和原始语法。两者语法有很多不同，前者相当于一种简单的变形，后者相当与使用js进行编程

特性

1. 可断点调试
2. 小而快
3. 支持Express，Koa，webpack

语法

<script id="testTem" type="text/html">
  // 模板语言
 </script>

1. {{ }}标准语法
2. <% %>原始语法
3. 注意使用script标签调用的是lib/template-web.js

var html = template("testTem",data)

1. 注意模板使用id，不支持传入文件路径
2. 直接生成html

知识点

1. {{}}是编译输出，{{#}}是不编译输出

控制流

{{if value}}
{{else if value}}
{{else}}
{{/if}}

1. value不需要小括号
2. 最后使用/if结束

循环

{{each arr}}
{{/each}}

1. 索引$index
2. 值$value

自定义方法

template.helper有点像过滤器

template.helper('show',function(set){
  if (set) {
    return "男"
  }else {
     return "女"
  }
})

1. 然后在{{}}中就可以直接使用定义的方法了

模板继承

1. 在骨架中，使用{{block "content"}}{{/block}}方式定义块
2. 在另一个模板文件中，使用{{extend "./layout.art"}}继承，再使用骨架的各个块

调用子模板

写好两个独立的模板，使用调用语法即可

1. {{ include children a}}

• children是模板id
• a是传入数据

2. {{ include children }}

• 和父模板是资源共享

模板变量

// 导入变量
template.default.imports.log = console.log
// 在模板中使用
{{ $imports.log('hello') }}

1. $data 传入模板的数据
2. $imports 外部导入的变量�以及全局变量
3. print 字符串输出函数
4. include 子模板载入函数
5. extend 模板继承模板导入函数
6. block 模板块声明函数

解析规则

1. 可以改变界定符，比如<%%>改为<??>
2. 可以添加语法，比如添加es6语法${}

template.defaults

配置文件

API

各种API