08art-template回顾

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

特性

  1. 可断点调试
  2. 小而快
  3. 支持ExpressKoawebpack

语法


  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是传入数据
  1. {{ 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

你可能感兴趣的:(08art-template回顾)