update docs
This commit is contained in:
dntzhang
parent
043dc7f159
commit
9eb27306c0
|
|
@ -38,7 +38,7 @@ class Hello extends Omi.Component {
|
|||
}
|
||||
}
|
||||
|
||||
Omi.makeHTML('Hello', Hello);
|
||||
Omi.tag('hello', Hello);
|
||||
|
||||
class App extends Omi.Component {
|
||||
constructor(data) {
|
||||
|
|
@ -48,7 +48,7 @@ class App extends Omi.Component {
|
|||
render() {
|
||||
return `
|
||||
<div>
|
||||
<Hello data-name="Omi" />
|
||||
<hello data-name="Omi" ></hello>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
@ -75,7 +75,7 @@ class App extends Omi.Component {
|
|||
render() {
|
||||
return `
|
||||
<div>
|
||||
<Hello data="helloData" />
|
||||
<hello data="helloData" ></hello>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
@ -117,7 +117,7 @@ class App extends Omi.Component {
|
|||
render() {
|
||||
return `
|
||||
<div>
|
||||
<Hello data="complexData.a.b.c[1]" />
|
||||
<hello data="complexData.a.b.c[1]" ></hello>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
@ -146,9 +146,9 @@ class App extends Omi.Component {
|
|||
render() {
|
||||
return `
|
||||
<div>
|
||||
<Hello group-data="testData" />
|
||||
<Hello group-data="testData" />
|
||||
<Hello group-data="testData" />
|
||||
<hello group-data="testData" ></hello>
|
||||
<hello group-data="testData" ></hello>
|
||||
<hello group-data="testData" ></hello>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -171,7 +171,7 @@ Omi.render(new App(),"#container");
|
|||
import Hello from './hello.js';
|
||||
|
||||
|
||||
Omi.makeHTML('Hello', Hello);
|
||||
Omi.tag('hello', Hello);
|
||||
|
||||
class App extends Omi.Component {
|
||||
constructor(data) {
|
||||
|
|
@ -199,8 +199,8 @@ class App extends Omi.Component {
|
|||
render() {
|
||||
return `
|
||||
<div>
|
||||
<Hello group-data="complexData.a.b.c[0].e" />
|
||||
<Hello group-data="complexData.a.b.c[0].e" />
|
||||
<hello group-data="complexData.a.b.c[0].e" ></hello>
|
||||
<hello group-data="complexData.a.b.c[0].e" ></hello>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -229,7 +229,7 @@ class App extends Omi.Component {
|
|||
render() {
|
||||
return `
|
||||
<div>
|
||||
<Hello name="hello" />
|
||||
<hello name="hello" ></hello>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
@ -255,7 +255,7 @@ class App extends Omi.Component {
|
|||
render() {
|
||||
return `
|
||||
<div>
|
||||
<Hello omi-id="hello" />
|
||||
<hello omi-id="hello" ></hello>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,133 +1,140 @@
|
|||
## 组件
|
||||
|
||||
[Omi框架](https://github.com/AlloyTeam/omi)完全基于组件体系设计，我们希望开发者可以像搭积木一样制作Web程序，一切皆是组件，组件也可以嵌套子组件形成新的组件，新的组件又可以当作子组件嵌套至任意组件形成新的组件...
|
||||
|
||||
|
||||
|
||||
## 简单组件
|
||||
|
||||
这里使用Todo的例子来讲解Omi组件体系的使用。
|
||||
|
||||
```js
|
||||
class Todo extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
add (evt) {
|
||||
evt.preventDefault();
|
||||
this.data.items.push(this.data.text);
|
||||
this.data.text = '';
|
||||
this.update();
|
||||
}
|
||||
|
||||
style () {
|
||||
return `
|
||||
h3 { color:red; }
|
||||
button{ color:green;}
|
||||
`;
|
||||
}
|
||||
|
||||
handleChange(target){
|
||||
this.data.text = target.value;
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<div>
|
||||
<h3>TODO</h3>
|
||||
<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>
|
||||
<form onsubmit="add(event)" >
|
||||
<input type="text" onchange="handleChange(this)" value="{{text}}" />
|
||||
<button>Add #{{items.length}}</button>
|
||||
</form>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render(new Todo({ items: [] ,text : '' }),"body");
|
||||
```
|
||||
|
||||
组件生成的HTML最终会插入到body中。上面的例子展示了Omi的部分特性:
|
||||
|
||||
- data传递: new Todo(data,..)的data可以直接提供给render方法里的模板
|
||||
- 局部CSS: h3只对render里的h3生效，不会污染外面的h3；button也是同样的
|
||||
- 声明式事件绑定: onchange调用的就是组件内的handleChange，this可以拿到当然的DOM元素,还可以拿到当前的event
|
||||
- 需要手动调用update方法才能更新组件
|
||||
|
||||
这里需要特别强调的是，为了更加的自由和灵活度。Omi没有内置数据变更的自动更新，需要开发者自己调用update方法。
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=todo" target="_blank">点击这里→在线试试</a>
|
||||
|
||||
## 组件嵌套
|
||||
|
||||
如果页面超级简单的话，可以没有组件嵌套。但是绝大部分Web网页或者Web应用，需要嵌套定义的组件来完成所有的功能和展示。比如上面的Todo，我们也是可以抽取出List。
|
||||
这样让程序易维护、可扩展、方便复用。如，我们抽取出List：
|
||||
|
||||
```js
|
||||
class List extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
怎么使用这个List？我们需要使用Omi.makeHTML把List制作成可以声明式的标签，在render方法中就能直接使用该标签。如下所示：
|
||||
|
||||
```js
|
||||
import List from './list.js';
|
||||
|
||||
Omi.makeHTML('List', List);
|
||||
|
||||
class Todo extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
this.data.length = this.data.items.length;
|
||||
this.listData = { items : this.data.items };
|
||||
}
|
||||
|
||||
add (evt) {
|
||||
evt.preventDefault();
|
||||
this.list.data.items.push(this.data.text);
|
||||
this.data.length = this.list.data.items.length;
|
||||
this.data.text = '';
|
||||
this.update();
|
||||
}
|
||||
|
||||
style () {
|
||||
return `
|
||||
h3 { color:red; }
|
||||
button{ color:green;}
|
||||
`;
|
||||
}
|
||||
|
||||
handleChange(target){
|
||||
this.data.text = target.value;
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<div>
|
||||
<h3>TODO</h3>
|
||||
<List name="list" data="listData" />
|
||||
<form onsubmit="add(event)" >
|
||||
<input type="text" onchange="handleChange(this)" value="{{text}}" />
|
||||
<button>Add #{{length}}</button>
|
||||
</form>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* 第3行，通过makeHTML方法把组件制作成可以在render中使用的标签。当然Omi.makeHTML('List', List);也可以写在List组件的代码下面。
|
||||
* 第9行，在父组件上定义listData属性用来传递给子组件。
|
||||
* 第34行，在render方法中使用List组件。其中name方法可以让你在代码里通过this快速方法到该组件的实例。data="listData"可以让你把this.listData传递给子组件。
|
||||
|
||||
需要注意的是，父组件的this.listData会被通过Object.assign浅拷贝到子组件。
|
||||
这样做的目的主要是希望以后DOM的变更都尽量修改子组件自身的data，然后再调用其update方法，而不是去更改父组件的listData。
|
||||
|
||||
关于Omi组件通讯其实有4种方案，这个后续教程会专门来讲。
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=todo_nest" target="_blank">点击这里→在线试试</a>
|
||||
## 组件
|
||||
|
||||
[Omi框架](https://github.com/AlloyTeam/omi)完全基于组件体系设计，我们希望开发者可以像搭积木一样制作Web程序，一切皆是组件，组件也可以嵌套子组件形成新的组件，新的组件又可以当作子组件嵌套至任意组件形成新的组件...
|
||||
|
||||
|
||||
|
||||
## 简单组件
|
||||
|
||||
这里使用Todo的例子来讲解Omi组件体系的使用。
|
||||
|
||||
```js
|
||||
class Todo extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
add (evt) {
|
||||
evt.preventDefault();
|
||||
this.data.items.push(this.data.text);
|
||||
this.data.text = '';
|
||||
this.update();
|
||||
}
|
||||
|
||||
style () {
|
||||
return `
|
||||
h3 { color:red; }
|
||||
button{ color:green;}
|
||||
`;
|
||||
}
|
||||
|
||||
handleChange(target){
|
||||
this.data.text = target.value;
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<div>
|
||||
<h3>TODO</h3>
|
||||
<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>
|
||||
<form onsubmit="add(event)" >
|
||||
<input type="text" onchange="handleChange(this)" value="{{text}}" />
|
||||
<button>Add #{{items.length}}</button>
|
||||
</form>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render(new Todo({ items: [] ,text : '' }),"body");
|
||||
```
|
||||
|
||||
组件生成的HTML最终会插入到body中。上面的例子展示了Omi的部分特性:
|
||||
|
||||
- data传递: new Todo(data,..)的data可以直接提供给render方法里的模板
|
||||
- 局部CSS: h3只对render里的h3生效，不会污染外面的h3；button也是同样的
|
||||
- 声明式事件绑定: onchange调用的就是组件内的handleChange，this可以拿到当然的DOM元素,还可以拿到当前的event
|
||||
- 需要手动调用update方法才能更新组件
|
||||
|
||||
这里需要特别强调的是，为了更加的自由和灵活度。Omi没有内置数据变更的自动更新，需要开发者自己调用update方法。
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=todo" target="_blank">点击这里→在线试试</a>
|
||||
|
||||
## 组件嵌套
|
||||
|
||||
如果页面超级简单的话，可以没有组件嵌套。但是绝大部分Web网页或者Web应用，需要嵌套定义的组件来完成所有的功能和展示。比如上面的Todo，我们也是可以抽取出List。
|
||||
这样让程序易维护、可扩展、方便复用。如，我们抽取出List：
|
||||
|
||||
```js
|
||||
class List extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
怎么使用这个List？我们需要使用Omi.makeHTML把List制作成可以声明式的标签，在render方法中就能直接使用该标签。如下所示：
|
||||
|
||||
```js
|
||||
import List from './list.js';
|
||||
|
||||
Omi.tag('list', List);
|
||||
|
||||
class Todo extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
this.data.length = this.data.items.length;
|
||||
this.listData = { items : this.data.items };
|
||||
}
|
||||
|
||||
add (evt) {
|
||||
evt.preventDefault();
|
||||
this.list.data.items.push(this.data.text);
|
||||
this.data.length = this.list.data.items.length;
|
||||
this.data.text = '';
|
||||
this.update();
|
||||
}
|
||||
|
||||
style () {
|
||||
return `
|
||||
h3 { color:red; }
|
||||
button{ color:green;}
|
||||
`;
|
||||
}
|
||||
|
||||
handleChange(target){
|
||||
this.data.text = target.value;
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<div>
|
||||
<h3>TODO</h3>
|
||||
<list name="list" data="listData" ></list>
|
||||
<form onsubmit="add(event)" >
|
||||
<input type="text" onchange="handleChange(this)" value="{{text}}" />
|
||||
<button>Add #{{length}}</button>
|
||||
</form>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* 第3行，通过tag方法把组件制作成可以在render中使用的标签。当然Omi.tag('list', List);也可以写在List组件的代码下面。
|
||||
* 第9行，在父组件上定义listData属性用来传递给子组件。
|
||||
* 第34行，在render方法中使用List组件。其中name方法可以让你在代码里通过this快速方法到该组件的实例。data="listData"可以让你把this.listData传递给子组件。
|
||||
|
||||
需要注意的是，父组件的this.listData会被通过Object.assign浅拷贝到子组件。你可以通过在组件上标记selfDataFirst或者sdf来表示组件自身的data的优先级更高还是父组件传递过来的data的优先级更好。Omi内部的源代码是这样子:
|
||||
|
||||
```js
|
||||
if(this.selfDataFirst){
|
||||
this.data = Object.assign({},this._getDataset(childStr),this.data)
|
||||
}else{
|
||||
this.data = Object.assign({},this.data, this._getDataset(childStr))
|
||||
}
|
||||
```
|
||||
|
||||
关于Omi组件通讯其实有4种方案，这个后续教程会专门来讲。
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=todo_nest" target="_blank">点击这里→在线试试</a>
|
||||
|
|
|
|||
|
|
@ -1,89 +1,108 @@
|
|||
## 条件判断
|
||||
|
||||
我们经常需要根据不同的状态呈现不同的界面，比如有的用户是vip要显示vip的Logo。Omi有许多种方式满足你的要求。
|
||||
|
||||
### 方式一
|
||||
|
||||
```js
|
||||
class ConditionTest extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render () {
|
||||
return `{{#isVip}}
|
||||
<div>you are VIP.</div>
|
||||
{{/isVip}}
|
||||
{{^isVip}}
|
||||
<div>you are not VIP.</div>
|
||||
{{/isVip}}`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
上面完全使用mustachejs的条件判断的语法。当然Omi不强制你使用mustachejs。你可以是omi.lite.js，然后重写Omi.template方法去使用任意你喜爱的模板引擎。
|
||||
|
||||
### 方式二
|
||||
|
||||
```js
|
||||
class ConditionTest extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render () {
|
||||
if(this.data.isVip){
|
||||
return '<div>you are VIP.</div>';
|
||||
}else{
|
||||
return '<div>you are not VIP.</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
render就是提供了很好的可编程性，里面可以写任意js逻辑代码。对了，差点忘了，style方法里面也可以写js逻辑的。
|
||||
|
||||
```js
|
||||
class ConditionTest extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
style (){
|
||||
if(this.data.isVip){
|
||||
return 'div{ color : red; }';
|
||||
}else{
|
||||
return 'div{ color : green; }';
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
if(this.data.isVip){
|
||||
return '<div>you are VIP.</div>';
|
||||
}else{
|
||||
return '<div>you are not VIP.</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 方式三
|
||||
|
||||
```js
|
||||
class ConditionTest extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render() {
|
||||
return `
|
||||
${this.data.isVip
|
||||
?"<div>you are VIP.</div>"
|
||||
:"<div>you are not VIP.</div>"
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 条件判断
|
||||
|
||||
我们经常需要根据不同的状态呈现不同的界面，比如有的用户是vip要显示vip的Logo。Omi有许多种方式满足你的要求。
|
||||
|
||||
### 方式零
|
||||
|
||||
```js
|
||||
class ConditionTest extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render () {
|
||||
return `
|
||||
<div o-if="isVip">you are VIP.</div>
|
||||
<div o-if="!isVip">you are not VIP.</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
这是omi.js的条件判断方式。
|
||||
|
||||
### 方式一
|
||||
|
||||
```js
|
||||
class ConditionTest extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render () {
|
||||
return `{{#isVip}}
|
||||
<div>you are VIP.</div>
|
||||
{{/isVip}}
|
||||
{{^isVip}}
|
||||
<div>you are not VIP.</div>
|
||||
{{/isVip}}`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
上面是omi.mustache.js的条件判断方式。完全使用mustachejs的条件判断的语法。当然Omi不强制你使用mustachejs。你可以是omi.lite.js，然后重写Omi.template方法去使用任意你喜爱的模板引擎。
|
||||
|
||||
### 方式二
|
||||
|
||||
```js
|
||||
class ConditionTest extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render () {
|
||||
if(this.data.isVip){
|
||||
return '<div>you are VIP.</div>';
|
||||
}else{
|
||||
return '<div>you are not VIP.</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
render就是提供了很好的可编程性，里面可以写任意js逻辑代码。对了，差点忘了，style方法里面也可以写js逻辑的。
|
||||
|
||||
```js
|
||||
class ConditionTest extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
style (){
|
||||
if(this.data.isVip){
|
||||
return 'div{ color : red; }';
|
||||
}else{
|
||||
return 'div{ color : green; }';
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
if(this.data.isVip){
|
||||
return '<div>you are VIP.</div>';
|
||||
}else{
|
||||
return '<div>you are not VIP.</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 方式三
|
||||
|
||||
```js
|
||||
class ConditionTest extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render() {
|
||||
return `
|
||||
${this.data.isVip
|
||||
?"<div>you are VIP.</div>"
|
||||
:"<div>you are not VIP.</div>"
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
当然可以使用${ }里面写javascript代码进行输出。
|
||||
|
|
@ -1,112 +1,112 @@
|
|||
## 事件处理
|
||||
|
||||
Omi的事件分内置事件和自定义事件。在内置事件处理方面巧妙地利用了浏览器自身的管线机制，可以通过event和this轻松拿到事件实例和触发该事件的元素。
|
||||
|
||||
### 内置事件
|
||||
|
||||
什么算内置事件？只要下面正则能匹配到就算内置事件。
|
||||
|
||||
```js
|
||||
on(abort|blur|cancel|canplay|canplaythrough|change|click|close|contextmenu|cuechange|dblclick|drag|dragend|dragenter|dragleave|dragover|dragstart|drop|durationchange|emptied|ended|error|focus|input|invalid|keydown|keypress|keyup|load|loadeddata|loadedmetadata|loadstart|mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup|mousewheel|pause|play|playing|progress|ratechange|reset|resize|scroll|seeked|seeking|select|show|stalled|submit|suspend|timeupdate|toggle|volumechange|waiting|autocomplete|autocompleteerror|beforecopy|beforecut|beforepaste|copy|cut|paste|search|selectstart|wheel|webkitfullscreenchange|webkitfullscreenerror|touchstart|touchmove|touchend|touchcancel|pointerdown|pointerup|pointercancel|pointermove|pointerover|pointerout|pointerenter|pointerleave)
|
||||
```
|
||||
|
||||
内置事件怎么绑定？如下所示：
|
||||
|
||||
```js
|
||||
class EventTest extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
handleClick(dom, evt){
|
||||
alert(dom.innerHTML);
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<div onclick="handleClick(this, event)">Hello, Omi!</div>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义事件
|
||||
|
||||
开发者自己定义的组件的事件，称为自定义事件，自定义事件必须以on开头，即onXXXX的格式，不然Omi识别不到。这里拿分页作为例子：
|
||||
|
||||
```js
|
||||
import Omi from '../../src/index.js';
|
||||
import Pagination from './pagination.js';
|
||||
import Content from './content.js';
|
||||
|
||||
Omi.makeHTML('Pagination', Pagination);
|
||||
Omi.makeHTML('Content', Content);
|
||||
|
||||
class Main extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
installed(){
|
||||
this.content.goto(this.pagination.data.currentPage+1);
|
||||
}
|
||||
|
||||
handlePageChange(index){
|
||||
this.content.goto(index+1);
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<div>
|
||||
<h1>Pagination Example</h1>
|
||||
<Content name="content" />
|
||||
<Pagination
|
||||
name="pagination"
|
||||
data-total="100"
|
||||
data-page-size="10"
|
||||
data-num-edge="1"
|
||||
data-num-display="4"
|
||||
onPageChange="handlePageChange" />
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render( new Main(),'body');
|
||||
```
|
||||
|
||||
如上面的onPageChange就是自定义事件，触发会执行handlePageChange。onPageChange方法是在Pagination中执行：
|
||||
|
||||
```js
|
||||
import Omi from '../../src/index.js';
|
||||
|
||||
class Pagination extends Omi.Component {
|
||||
...
|
||||
...
|
||||
...
|
||||
linkTo: "#",
|
||||
prevText: "Prev",
|
||||
nextText: "Next",
|
||||
ellipseText: "...",
|
||||
prevShow: true,
|
||||
nextShow: true,
|
||||
onPageChange: function () { return false; }
|
||||
}, this.data);
|
||||
|
||||
this.pageNum = Math.ceil(this.data.total / this.data.pageSize);
|
||||
}
|
||||
|
||||
goto (index,evt) {
|
||||
evt.preventDefault();
|
||||
this.data.currentPage=index;
|
||||
this.update();
|
||||
this.data.onPageChange(index);
|
||||
}
|
||||
...
|
||||
...
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
这里取了Pagination组件的部分代码。高亮的就是执行onPageChange的地方。
|
||||
|
||||
### 相关地址
|
||||
|
||||
* [演示地址](http://alloyteam.github.io/omi/example/pagination/)
|
||||
* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/pagination)
|
||||
## 事件处理
|
||||
|
||||
Omi的事件分内置事件和自定义事件。在内置事件处理方面巧妙地利用了浏览器自身的管线机制，可以通过event和this轻松拿到事件实例和触发该事件的元素。
|
||||
|
||||
### 内置事件
|
||||
|
||||
什么算内置事件？只要下面正则能匹配到就算内置事件。
|
||||
|
||||
```js
|
||||
on(abort|blur|cancel|canplay|canplaythrough|change|click|close|contextmenu|cuechange|dblclick|drag|dragend|dragenter|dragleave|dragover|dragstart|drop|durationchange|emptied|ended|error|focus|input|invalid|keydown|keypress|keyup|load|loadeddata|loadedmetadata|loadstart|mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup|mousewheel|pause|play|playing|progress|ratechange|reset|resize|scroll|seeked|seeking|select|show|stalled|submit|suspend|timeupdate|toggle|volumechange|waiting|autocomplete|autocompleteerror|beforecopy|beforecut|beforepaste|copy|cut|paste|search|selectstart|wheel|webkitfullscreenchange|webkitfullscreenerror|touchstart|touchmove|touchend|touchcancel|pointerdown|pointerup|pointercancel|pointermove|pointerover|pointerout|pointerenter|pointerleave)
|
||||
```
|
||||
|
||||
内置事件怎么绑定？如下所示：
|
||||
|
||||
```js
|
||||
class EventTest extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
handleClick(dom, evt){
|
||||
alert(dom.innerHTML);
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<div onclick="handleClick(this, event)">Hello, Omi!</div>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义事件
|
||||
|
||||
开发者自己定义的组件的事件，称为自定义事件，自定义事件必须以on开头，即onXXXX的格式，不然Omi识别不到。这里拿分页作为例子：
|
||||
|
||||
```js
|
||||
import Omi from '../../src/index.js';
|
||||
import Pagination from './pagination.js';
|
||||
import Content from './content.js';
|
||||
|
||||
Omi.tag('pagination', Pagination);
|
||||
Omi.tag('content', Content);
|
||||
|
||||
class Main extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
installed(){
|
||||
this.content.goto(this.pagination.data.currentPage+1);
|
||||
}
|
||||
|
||||
handlePageChange(index){
|
||||
this.content.goto(index+1);
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<div>
|
||||
<h1>Pagination Example</h1>
|
||||
<content name="content" ></content>
|
||||
<pagination
|
||||
name="pagination"
|
||||
data-total="100"
|
||||
data-page-size="10"
|
||||
data-num-edge="1"
|
||||
data-num-display="4"
|
||||
onPageChange="handlePageChange" ></pagination>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render( new Main(),'body');
|
||||
```
|
||||
|
||||
如上面的onPageChange就是自定义事件，触发会执行handlePageChange。onPageChange方法是在Pagination中执行：
|
||||
|
||||
```js
|
||||
import Omi from '../../src/index.js';
|
||||
|
||||
class Pagination extends Omi.Component {
|
||||
...
|
||||
...
|
||||
...
|
||||
linkTo: "#",
|
||||
prevText: "Prev",
|
||||
nextText: "Next",
|
||||
ellipseText: "...",
|
||||
prevShow: true,
|
||||
nextShow: true,
|
||||
onPageChange: function () { return false; }
|
||||
}, this.data);
|
||||
|
||||
this.pageNum = Math.ceil(this.data.total / this.data.pageSize);
|
||||
}
|
||||
|
||||
goto (index,evt) {
|
||||
evt.preventDefault();
|
||||
this.data.currentPage=index;
|
||||
this.update();
|
||||
this.data.onPageChange(index);
|
||||
}
|
||||
...
|
||||
...
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
这里取了Pagination组件的部分代码。高亮的就是执行onPageChange的地方。
|
||||
|
||||
### 相关地址
|
||||
|
||||
* [演示地址](http://alloyteam.github.io/omi/example/pagination/)
|
||||
* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/pagination)
|
||||
|
|
|
|||
|
|
@ -1,130 +1,130 @@
|
|||
## Hello World
|
||||
|
||||
你可以使用ES6+或者ES5的方式编写Omi程序来搭建你的Web程序。
|
||||
|
||||
### Hello World with ES6+
|
||||
|
||||
你可以使用 [webpack](https://webpack.github.io/) 打包工具，webpack会把你的模块代码打成一个很小的包，优化加载时间。使用[babel](http://babeljs.io/)，让你立刻马上使用ES6+来编写你的web程序。你只需要在webpack配置的module设置好[babel-loader](https://github.com/babel/babel-loader)便可。
|
||||
|
||||
一个Omi的简短的例子如下所示:
|
||||
|
||||
```js
|
||||
import Omi from './omi.js';
|
||||
|
||||
class Hello extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
style () {
|
||||
//注意，return中的<style></style>包裹是可选的。主要是为了识别为JSX文件可以有CSS高亮。
|
||||
return `
|
||||
<style>
|
||||
h1{
|
||||
cursor:pointer;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
}
|
||||
|
||||
handleClick(target, evt){
|
||||
alert(target.innerHTML);
|
||||
}
|
||||
|
||||
render() {
|
||||
return `
|
||||
<div>
|
||||
<h1 onclick="handleClick(this, event)">Hello ,{{name}}!</h1>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render(new Hello({ name : "Omi" }),"#container");
|
||||
```
|
||||
|
||||
组件生成的HTML最终会插入到#container中。上面的例子展示了Omi的部分特性:
|
||||
|
||||
- data传递: new Hello(data,..)的data可以直接提供给render方法里的模板
|
||||
- 局部CSS: h1只对render里的h1生效，不会污染外面的h1
|
||||
- 声明式事件绑定: onclick调用的就是组件内的handleClick，this可以拿到当前的DOM元素,还可以拿到当前的event
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=hello" target="_blank">点击这里→在线试试</a>
|
||||
|
||||
你可以使用Omi.makeHTML来生成组件标签用于嵌套。
|
||||
```js
|
||||
Omi.makeHTML('Hello', Hello);
|
||||
```
|
||||
那么你就在其他组件中使用，如
|
||||
```js
|
||||
...
|
||||
render() {
|
||||
return `
|
||||
<div>
|
||||
<div>Test</div>
|
||||
<Hello data-name="Omi" />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=hello_nest" target="_blank">点击这里→在线试试</a>
|
||||
|
||||
### Hello World with ES5
|
||||
|
||||
当然Omi没有抛弃ES5的用户。你可以使用ES5的方式编写Omi。如，在你的HTML中引用omi.js：
|
||||
|
||||
```html
|
||||
<script src="omi.js"></script>
|
||||
```
|
||||
|
||||
然后：
|
||||
|
||||
```js
|
||||
var Hello = Omi.create("Hello", {
|
||||
style: function () {
|
||||
return "h1{ cursor:pointer }";
|
||||
},
|
||||
|
||||
handleClick: function (dom) {
|
||||
alert(dom.innerHTML)
|
||||
},
|
||||
|
||||
render: function () {
|
||||
return ' <div>\
|
||||
<h1 onclick="handleClick(this, event)">\
|
||||
Hello ,{{name}}!\
|
||||
</h1>\
|
||||
</div>'
|
||||
}
|
||||
});
|
||||
|
||||
var Test = Omi.create("Test", {
|
||||
render: function () {
|
||||
return '<div>\
|
||||
<div>Test</div>\
|
||||
<Hello data-name="Omi" />\
|
||||
</div>'
|
||||
}
|
||||
});
|
||||
|
||||
Omi.render(new Test(),'#container');
|
||||
```
|
||||
当然除了在HTML引入脚本，你还可以使用AMD、CMD或者CommonJS的方式引入Omi，这里就不再一一列举。
|
||||
|
||||
需要注意的是，Omi.create的第一个参数Hello是用来生成Tag Name的。你可以在其他地方嵌入你的组件。如：
|
||||
|
||||
```js
|
||||
...
|
||||
render:function() {
|
||||
return '<div>\
|
||||
<Hello data-name="Omi1" />\
|
||||
<div>Test XXXX</div>\
|
||||
<Hello data-name="Omi2" />\
|
||||
</div>';
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=hello_es5" target="_blank">点击这里→在线试试</a>
|
||||
## Hello World
|
||||
|
||||
你可以使用ES6+或者ES5的方式编写Omi程序来搭建你的Web程序。
|
||||
|
||||
### Hello World with ES6+
|
||||
|
||||
你可以使用 [webpack](https://webpack.github.io/) 打包工具，webpack会把你的模块代码打成一个很小的包，优化加载时间。使用[babel](http://babeljs.io/)，让你立刻马上使用ES6+来编写你的web程序。你只需要在webpack配置的module设置好[babel-loader](https://github.com/babel/babel-loader)便可。
|
||||
|
||||
一个Omi的简短的例子如下所示:
|
||||
|
||||
```js
|
||||
import Omi from './omi.js';
|
||||
|
||||
class Hello extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
style () {
|
||||
//注意，return中的<style></style>包裹是可选的。主要是为了识别为JSX文件可以有CSS高亮。
|
||||
return `
|
||||
<style>
|
||||
h1{
|
||||
cursor:pointer;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
}
|
||||
|
||||
handleClick(target, evt){
|
||||
alert(target.innerHTML);
|
||||
}
|
||||
|
||||
render() {
|
||||
return `
|
||||
<div>
|
||||
<h1 onclick="handleClick(this, event)">Hello ,{{name}}!</h1>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render(new Hello({ name : "Omi" }),"#container");
|
||||
```
|
||||
|
||||
组件生成的HTML最终会插入到#container中。上面的例子展示了Omi的部分特性:
|
||||
|
||||
- data传递: new Hello(data,..)的data可以直接提供给render方法里的模板
|
||||
- 局部CSS: h1只对render里的h1生效，不会污染外面的h1
|
||||
- 声明式事件绑定: onclick调用的就是组件内的handleClick，this可以拿到当前的DOM元素,还可以拿到当前的event
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=hello" target="_blank">点击这里→在线试试</a>
|
||||
|
||||
你可以使用Omi.tag来生成组件标签用于嵌套。
|
||||
```js
|
||||
Omi.tag('hello', Hello);
|
||||
```
|
||||
那么你就在其他组件中使用，如
|
||||
```js
|
||||
...
|
||||
render() {
|
||||
return `
|
||||
<div>
|
||||
<div>Test</div>
|
||||
<hello data-name="Omi" ></hello>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=hello_nest" target="_blank">点击这里→在线试试</a>
|
||||
|
||||
### Hello World with ES5
|
||||
|
||||
当然Omi没有抛弃ES5的用户。你可以使用ES5的方式编写Omi。如，在你的HTML中引用omi.js：
|
||||
|
||||
```html
|
||||
<script src="omi.js"></script>
|
||||
```
|
||||
|
||||
然后：
|
||||
|
||||
```js
|
||||
var Hello = Omi.create("hello", {
|
||||
style: function () {
|
||||
return "h1{ cursor:pointer }";
|
||||
},
|
||||
|
||||
handleClick: function (dom) {
|
||||
alert(dom.innerHTML)
|
||||
},
|
||||
|
||||
render: function () {
|
||||
return ' <div>\
|
||||
<h1 onclick="handleClick(this, event)">\
|
||||
Hello ,{{name}}!\
|
||||
</h1>\
|
||||
</div>'
|
||||
}
|
||||
});
|
||||
|
||||
var Test = Omi.create("Test", {
|
||||
render: function () {
|
||||
return '<div>\
|
||||
<div>Test</div>\
|
||||
<hello data-name="Omi" ><hello>\
|
||||
</div>'
|
||||
}
|
||||
});
|
||||
|
||||
Omi.render(new Test(),'#container');
|
||||
```
|
||||
当然除了在HTML引入脚本，你还可以使用AMD、CMD或者CommonJS的方式引入Omi，这里就不再一一列举。
|
||||
|
||||
需要注意的是，Omi.create的第一个参数Hello是用来生成Tag Name的。你可以在其他地方嵌入你的组件。如：
|
||||
|
||||
```js
|
||||
...
|
||||
render:function() {
|
||||
return '<div>\
|
||||
<hello data-name="Omi1" ></hello>\
|
||||
<div>Test XXXX</div>\
|
||||
<hello data-name="Omi2" ></hello>\
|
||||
</div>';
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=hello_es5" target="_blank">点击这里→在线试试</a>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,56 @@
|
|||
## 继承
|
||||
|
||||
通过继承机制，可以利用已有的数据类型来定义新的数据类型。所定义的新的数据类型不仅拥有新定义的成员，而且还同时拥有旧的成员。我们称已存在的用来派生新类的类为基类，又称为父类。由已存在的类派生出的新类称为派生类，又称为子类。
|
||||
|
||||
### 举个例子
|
||||
|
||||
```js
|
||||
class Hello extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
style () {
|
||||
return `
|
||||
div{
|
||||
cursor:pointer;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
handleClick(target, evt){
|
||||
alert(target.innerHTML);
|
||||
}
|
||||
|
||||
render() {
|
||||
return ' <div onclick="handleClick(this,event)">Hello {{name}}!</div>'
|
||||
}
|
||||
}
|
||||
|
||||
class SubHello extends Hello {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render(new SubHello({ name : 'Omi' }),'#container');
|
||||
```
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=inherit" target="_blank">点击这里→在线试试</a>
|
||||
|
||||
### ES5下的继承
|
||||
|
||||
```js
|
||||
var Hello = Omi.create("Hello",{
|
||||
render:function(){
|
||||
return ' <div>Hello {{name}}!</div>'
|
||||
}
|
||||
})
|
||||
|
||||
var SubHello = Omi.create("SubHello",Hello,{ });
|
||||
|
||||
|
||||
Omi.render(new SubHello({ name : 'Omi' }),'#container');
|
||||
```
|
||||
|
||||
## 继承
|
||||
|
||||
通过继承机制，可以利用已有的数据类型来定义新的数据类型。所定义的新的数据类型不仅拥有新定义的成员，而且还同时拥有旧的成员。我们称已存在的用来派生新类的类为基类，又称为父类。由已存在的类派生出的新类称为派生类，又称为子类。
|
||||
|
||||
### 举个例子
|
||||
|
||||
```js
|
||||
class Hello extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
style () {
|
||||
return `
|
||||
div{
|
||||
cursor:pointer;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
handleClick(target, evt){
|
||||
alert(target.innerHTML);
|
||||
}
|
||||
|
||||
render() {
|
||||
return ' <div onclick="handleClick(this,event)">Hello {{name}}!</div>'
|
||||
}
|
||||
}
|
||||
|
||||
class SubHello extends Hello {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render(new SubHello({ name : 'Omi' }),'#container');
|
||||
```
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=inherit" target="_blank">点击这里→在线试试</a>
|
||||
|
||||
### ES5下的继承
|
||||
|
||||
```js
|
||||
var Hello = Omi.create("hello",{
|
||||
render:function(){
|
||||
return ' <div>Hello {{name}}!</div>'
|
||||
}
|
||||
})
|
||||
|
||||
var SubHello = Omi.create("sub-hello",Hello,{ });
|
||||
|
||||
|
||||
Omi.render(new SubHello({ name : 'Omi' }),'#container');
|
||||
```
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=inherit_es5" target="_blank">点击这里→在线试试</a>
|
||||
|
|
@ -1,90 +1,117 @@
|
|||
## 循环遍历
|
||||
|
||||
下面介绍mustache.js的方式和javascript遍历的方式。
|
||||
|
||||
### 方式一
|
||||
|
||||
```js
|
||||
class List extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<div>
|
||||
<ul>
|
||||
{{#items}}
|
||||
<li id="{{id}}">{{text}}</li>
|
||||
{{/items}}
|
||||
</ul>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render(new List({
|
||||
items: [
|
||||
{id: 1, text: 'Omi'},
|
||||
{id: 2, text: 'dntzhang'},
|
||||
{id: 3, text: 'AlloyTeam'}
|
||||
]
|
||||
}),"body");
|
||||
```
|
||||
|
||||
mustache.js更详细的循环遍历使用可看[https://github.com/janl/mustache.js#non-empty-lists](https://github.com/janl/mustache.js#non-empty-lists)。 比如还支持：
|
||||
|
||||
* 如果items的每一项是字符串，可以直接**{{.}}**的方式来输出每一项
|
||||
* 循环的时候调用定义好的函数
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=list" target="_blank">点击这里→在线试试</a>
|
||||
|
||||
### 方式二
|
||||
|
||||
既然ES6+了，当然可以使用${ }以及Array的map方法:
|
||||
|
||||
```js
|
||||
class List extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render() {
|
||||
return `<div>
|
||||
<ul>
|
||||
${this.data.items.map(item =>
|
||||
`<li id="${item.id}">${item.text}</li>`
|
||||
).join('')}
|
||||
</ul>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render(new List({
|
||||
items: [
|
||||
{id: 1, text: 'Omi'},
|
||||
{id: 2, text: 'dntzhang'},
|
||||
{id: 3, text: 'AlloyTeam'}
|
||||
]
|
||||
}),"body");
|
||||
```
|
||||
|
||||
你将在页面看到如下效果:
|
||||
|
||||
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=list2" target="_blank">点击这里→在线试试</a>
|
||||
|
||||
如果想在循环里加些判断呢？比如需要把id为偶数的隐藏起来:
|
||||
|
||||
```js
|
||||
render() {
|
||||
return `<div>
|
||||
<ul>
|
||||
${this.data.items.map(item =>
|
||||
`<li style="display:${item.id%2===0?'none':'block'};" id="${item.id}">${item.text}</li>`
|
||||
).join('')}
|
||||
</ul>
|
||||
</div>`;
|
||||
}
|
||||
```
|
||||
|
||||
## 循环遍历
|
||||
|
||||
下面介绍mustache.js的方式和javascript遍历的方式。
|
||||
|
||||
### 方式零
|
||||
|
||||
```js
|
||||
class List extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render(){
|
||||
return `<div>
|
||||
<div o-repeat="item in items" o-if="item.show">
|
||||
{{$index}}- {{item.text}}
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Omi.render(new List({
|
||||
items: [
|
||||
{ text: 'Omi', show: true },
|
||||
{ text: 'dntzhang', show: true },
|
||||
{ text: 'AlloyTeam'}
|
||||
]
|
||||
}),"body",true);
|
||||
```
|
||||
|
||||
### 方式一
|
||||
|
||||
```js
|
||||
class List extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<div>
|
||||
<ul>
|
||||
{{#items}}
|
||||
<li id="{{id}}">{{text}}</li>
|
||||
{{/items}}
|
||||
</ul>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render(new List({
|
||||
items: [
|
||||
{id: 1, text: 'Omi'},
|
||||
{id: 2, text: 'dntzhang'},
|
||||
{id: 3, text: 'AlloyTeam'}
|
||||
]
|
||||
}),"body");
|
||||
```
|
||||
|
||||
mustache.js更详细的循环遍历使用可看[https://github.com/janl/mustache.js#non-empty-lists](https://github.com/janl/mustache.js#non-empty-lists)。 比如还支持：
|
||||
|
||||
* 如果items的每一项是字符串，可以直接**{{.}}**的方式来输出每一项
|
||||
* 循环的时候调用定义好的函数
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=list" target="_blank">点击这里→在线试试</a>
|
||||
|
||||
### 方式二
|
||||
|
||||
既然ES6+了，当然可以使用${ }以及Array的map方法:
|
||||
|
||||
```js
|
||||
class List extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render() {
|
||||
return `<div>
|
||||
<ul>
|
||||
${this.data.items.map(item =>
|
||||
`<li id="${item.id}">${item.text}</li>`
|
||||
).join('')}
|
||||
</ul>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render(new List({
|
||||
items: [
|
||||
{id: 1, text: 'Omi'},
|
||||
{id: 2, text: 'dntzhang'},
|
||||
{id: 3, text: 'AlloyTeam'}
|
||||
]
|
||||
}),"body");
|
||||
```
|
||||
|
||||
你将在页面看到如下效果:
|
||||
|
||||
|
||||
|
||||
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=list2" target="_blank">点击这里→在线试试</a>
|
||||
|
||||
如果想在循环里加些判断呢？比如需要把id为偶数的隐藏起来:
|
||||
|
||||
```js
|
||||
render() {
|
||||
return `<div>
|
||||
<ul>
|
||||
${this.data.items.map(item =>
|
||||
`<li style="display:${item.id%2===0?'none':'block'};" id="${item.id}">${item.text}</li>`
|
||||
).join('')}
|
||||
</ul>
|
||||
</div>`;
|
||||
}
|
||||
```
|
||||
|
||||
所以模板字符串还是非常方便，随着ES继续发展下去，模板引擎估计会慢慢消失。所以omi提供了 omi.lite.js 版本不包含任何模板引擎。
|
||||
|
|
@ -29,13 +29,13 @@ class Main extends Omi.Component {
|
|||
return `<div>
|
||||
<h1>Pagination Example</h1>
|
||||
<Content name="content" />
|
||||
<Pagination
|
||||
<pagination
|
||||
name="pagination"
|
||||
:data-total="100"
|
||||
:data-page-size="10"
|
||||
:data-num-edge="1"
|
||||
:data-num-display="4"
|
||||
onPageChange="handlePageChange" />
|
||||
onPageChange="handlePageChange" ></pagination>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
|
@ -158,7 +158,7 @@ beforeRender是生命周期的一部分。且看下面这张图:
|
|||
import Omi from '../../src/index.js';
|
||||
import List from './list.js';
|
||||
|
||||
Omi.makeHTML('List', List);
|
||||
Omi.tag('list', List);
|
||||
|
||||
class Todo extends Omi.Component {
|
||||
constructor(data) {
|
||||
|
|
@ -200,7 +200,7 @@ class Todo extends Omi.Component {
|
|||
return `<div>
|
||||
<h3>TODO</h3>
|
||||
<button onclick="clear">Clear</button>
|
||||
<List name="list" data="$store.data" />
|
||||
<list name="list" data="$store.data" ></list>
|
||||
<form onsubmit="add" >
|
||||
<input type="text" onchange="handleChange" value="{{text}}" />
|
||||
<button>Add #{{length}}</button>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,53 @@
|
|||
## 模板切换
|
||||
|
||||
Omi有三个版本。其中的omi.js和omi.lite.js属于Web端使用的版本。
|
||||
|
||||
* omi.js内置了[mustache.js](https://github.com/janl/mustache.js)作为模版引擎
|
||||
* omi.lite.js不包含任何模版引擎
|
||||
|
||||
Omi不强制开发者使用mustache.js，你可以根据业务场景使用任意模板引擎或者不使用模板引擎。
|
||||
|
||||
那么怎么使用别的模板引擎？下面拿[artTemplate](https://github.com/aui/artTemplate)作为例子。
|
||||
|
||||
### 使用artTemplate
|
||||
|
||||
```js
|
||||
Omi.template = function(tpl, data){
|
||||
return artTemplate.compile(tpl)(data);
|
||||
}
|
||||
```
|
||||
重写Omi.template方法，tpl为传入的模板，data为模板所需的数据，返回值为HTML。
|
||||
重写完毕后就能在render使用artTemplate的语法，如：
|
||||
|
||||
```js
|
||||
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>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 相关地址
|
||||
|
||||
* [演示地址](http://alloyteam.github.io/omi/example/artTemplate/)
|
||||
## 模板切换
|
||||
|
||||
[Omi框架](https://github.com/AlloyTeam/omi)到目前为止有三种版本。
|
||||
|
||||
* omi.js 使用 [sodajs](https://github.com/AlloyTeam/sodajs) 为内置指令系统
|
||||
* omi.lite.js 不包含任何模板引擎
|
||||
* omi.mustache.js 使用 [mustache.js](https://github.com/janl/mustache.js)为内置模版引擎
|
||||
|
||||
[sodajs](https://github.com/AlloyTeam/sodajs)是我们团队高级工程师(dorsywang)的作品，服务员QQ群、兴趣部落等多个产品线，
|
||||
以良好的兼容性、卓越的性能、简便的语法、超小的尺寸以及强大的功能而深受同事们的喜爱。下面先来看看sodajs怎么使用。
|
||||
|
||||
Omi不强制开发者使用soda指令或者mustache.js模版引擎，你可以根据业务场景使用任意模板引擎或者不使用模板引擎。
|
||||
|
||||
那么怎么使用别的模板引擎？下面拿[artTemplate](https://github.com/aui/artTemplate)作为例子。
|
||||
|
||||
### 使用artTemplate
|
||||
|
||||
```js
|
||||
Omi.template = function(tpl, data){
|
||||
return artTemplate.compile(tpl)(data);
|
||||
}
|
||||
```
|
||||
重写Omi.template方法，tpl为传入的模板，data为模板所需的数据，返回值为HTML。
|
||||
重写完毕后就能在render使用artTemplate的语法，如：
|
||||
|
||||
```js
|
||||
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>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 相关地址
|
||||
|
||||
* [演示地址](http://alloyteam.github.io/omi/example/artTemplate/)
|
||||
* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/artTemplate)
|
||||
Loading…
Reference in New Issue