模板切换
Omi框架到目前为止有三种版本。
- omi.js 使用 sodajs 为内置指令系统
- omi.lite.js 不包含任何模板引擎
- omi.mustache.js 使用 mustache.js为内置模版引擎
sodajs是我们团队高级工程师(dorsywang)的作品,服务员QQ群、兴趣部落等多个产品线, 以良好的兼容性、卓越的性能、简便的语法、超小的尺寸以及强大的功能而深受同事们的喜爱。下面先来看看sodajs怎么使用。
Omi不强制开发者使用soda指令或者mustache.js模版引擎,你可以根据业务场景使用任意模板引擎或者不使用模板引擎。
那么怎么使用别的模板引擎?下面拿artTemplate作为例子。
使用artTemplate
Omi.template = function(tpl, data){ return artTemplate.compile(tpl)(data); }
重写Omi.template方法,tpl为传入的模板,data为模板所需的数据,返回值为HTML。 重写完毕后就能在render使用artTemplate的语法,如:
class List extends Omi.Component { constructor(data) { super(data); } style () { return ` h1 { color:red; } li{ color:green;} `; } render () { return `<h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引 {{i + 1}} :{{value}}</li> {{/each}} </ul>`; } }