update readme

This commit is contained in:
dntzhang 2017-05-26 11:40:23 +08:00
parent 10ef6f0550
commit 37e59332e2
1 changed files with 12 additions and 17 deletions

View File

@ -1467,9 +1467,10 @@ Omi.render(new SubHello({ name : 'Omi' }),'#container');
## 模板切换
[Omi框架](https://github.com/AlloyTeam/omi)到目前为止有种版本。
[Omi框架](https://github.com/AlloyTeam/omi)到目前为止有种版本。
* omi.js 使用 [sodajs](https://github.com/AlloyTeam/sodajs) 为内置指令系统
* omi.art.js 使用 [art-template](https://github.com/aui/art-template) 为内置模版引擎
* omi.lite.js 不包含任何模板引擎
* omi.mustache.js 使用 [mustache.js](https://github.com/janl/mustache.js)为内置模版引擎
@ -1478,17 +1479,15 @@ Omi.render(new SubHello({ name : 'Omi' }),'#container');
Omi不强制开发者使用soda指令或者mustache.js模版引擎你可以根据业务场景使用任意模板引擎或者不使用模板引擎。
那么怎么使用别的模板引擎?下面拿[artTemplate](https://github.com/aui/artTemplate)作为例子。
那么怎么使用别的模板引擎?下面拿[ejs](https://github.com/tj/ejs)作为例子。
### 使用artTemplate
```js
Omi.template = function(tpl, data){
return artTemplate.compile(tpl)(data);
}
Omi.template = ejs.render
```
重写Omi.template方法tpl为传入的模板data为模板所需的数据返回值为HTML。
重写完毕后就能在render使用artTemplate的语法,如:
重写完毕后就能在render使用ejs的语法,如:
```js
class List extends Omi.Component {
@ -1504,21 +1503,17 @@ class List extends Omi.Component {
}
render () {
return `<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} {{value}}</li>
{{/each}}
</ul>`;
return `<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li foo='<%= name + "'" %>'><%= name %></li>
<% }) %>
</ul>
<% } %> `;
}
}
```
### 相关地址
* [演示地址](http://alloyteam.github.io/omi/example/artTemplate/)
* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/artTemplate)
## 获取DOM节点
虽然绝大部分情况下开发者不需要去查找获取DOM但是还是有需要获取DOM的场景所以Omi提供了方便获取DOM节点的方式。