模板切换
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>`;
}
}