prepare v1.5.0
This commit is contained in:
dntzhang
parent
d18903db07
commit
934b383ae1
|
|
@ -1,7 +1,7 @@
|
|||
import Omi from '../../src/index.js';
|
||||
import item from './item.js'
|
||||
import Item from './item.js'
|
||||
|
||||
Omi.tag('item',item)
|
||||
Omi.tag('item',Item)
|
||||
|
||||
class List extends Omi.Component {
|
||||
constructor(data) {
|
||||
|
|
@ -10,7 +10,7 @@ class List extends Omi.Component {
|
|||
|
||||
render(){
|
||||
return `<div>
|
||||
<item o-repeat="item in items" o-if="item.show" data-text="{{item.text}}"></item>
|
||||
<item o-repeat="item in items" o-if="item.show" data-text="{{item.text}}"></item>
|
||||
</div>`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -142,6 +142,82 @@ Omi.render(new List({
|
|||
|
||||
➜ [example](https://alloyteam.github.io/omi/website/redirect.html?type=repeat)
|
||||
|
||||
上面是一个简单是例子说明o-repeat和条件判断o-if指令的使用方式，也可以支持多重循环:
|
||||
|
||||
```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}}
|
||||
<ul>
|
||||
<li o-repeat="subItem in item.arr by $subIndex">
|
||||
<div>parent index: {{$index}}</div>
|
||||
<div>parent item text:{{item.text}}</div>
|
||||
<div>sub index: {{$subIndex}}</div>
|
||||
<div>sub item :{{subItem}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Omi.render(new List({
|
||||
items: [
|
||||
{ text: 'Omi', show: true ,arr:['a','b','c']},
|
||||
{ text: 'dntzhang', show: true, arr:['d','e']},
|
||||
{ text: 'AlloyTeam'}
|
||||
]
|
||||
}),"body",true);
|
||||
```
|
||||
|
||||
➜ [example](https://alloyteam.github.io/omi/website/redirect.html?type=repeat-n)
|
||||
|
||||
自定义标签也可以使用指令：
|
||||
|
||||
```js
|
||||
class Item extends Omi.Component {
|
||||
|
||||
render(){
|
||||
return `<div>Hello, {{text}}</div>`
|
||||
}
|
||||
}
|
||||
|
||||
Omi.tag('item',Item)
|
||||
|
||||
class List extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
}
|
||||
|
||||
render(){
|
||||
return `<div>
|
||||
<item o-repeat="item in items" o-if="item.show" data-text="{{item.text}}"></item>
|
||||
</div>`
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Omi.render(new List({
|
||||
items: [
|
||||
{ text: 'Omi', show: true },
|
||||
{ text: 'dntzhang', show: true },
|
||||
{ text: 'AlloyTeam'}
|
||||
]
|
||||
}),'#container');
|
||||
```
|
||||
|
||||
➜ [example](https://alloyteam.github.io/omi/website/redirect.html?type=repeat-ct)
|
||||
|
||||
|
||||
|
||||
|
||||
## Omi相关
|
||||
|
||||
* Omi官网[omijs.org](http://www.omijs.org)
|
||||
|
|
|
|||
|
|
@ -13,9 +13,14 @@
|
|||
var type=getQueryString().type;
|
||||
if(type ==='form'){
|
||||
goto('http://alloyteam.github.io/omi/example/playground/index.html?code=class%20FormTest%20extends%20Omi.Component%20%7B%0A%20%20%20%20constructor(data)%20%7B%0A%20%20%20%20%20%20%20%20super(data)%3B%0A%20%20%20%20%20%20%20%0A%20%20%20%20%7D%0A%0A%20%20%20%20handleChange(target)%7B%0A%20%20%20%20%20%20console.log(target.value)%0A%20%20%20%20%20%20this.data.value%20%3D%20target.value%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20handleSubmit(evt)%20%7B%0A%20%20%20%20%20%20alert(%27Your%20favorite%20flavor%20is%3A%20%27%20%2B%20this.data.value)%3B%0A%20%20%20%20%20%20evt.preventDefault()%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20render%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%60%0A%20%20%20%20%20%20%20%20%3Cform%20onsubmit%3D%22handleSubmit(event)%22%3E%0A%20%20%20%20%20%20%20%20%3Clabel%3E%0A%20%20%20%20%20%20%20%20%20%20Pick%20your%20favorite%20La%20Croix%20flavor%3A%0A%20%20%20%20%20%20%20%20%20%20%3Cselect%20value%3D%22%7B%7Bvalue%7D%7D%22%20onchange%3D%22handleChange(this)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22grapefruit%22%3EGrapefruit%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22lime%22%3ELime%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22coconut%22%3ECoconut%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22mango%22%3EMango%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fselect%3E%0A%20%20%20%20%20%20%20%20%3C%2Flabel%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22submit%22%20value%3D%22Submit%22%20%2F%3E%0A%20%20%20%20%20%20%3C%2Fform%3E%60%3B%0A%20%20%20%20%7D%0A%7D%20%0A%0AOmi.render(new%20FormTest(%7B%20value%3A%20%27mango%27%20%7D)%2C%27%23container%27)%3B%20%20');
|
||||
}else if(type==='repeat-n'){
|
||||
goto('http://alloyteam.github.io/omi/example/playground/index.html?code=class%20List%20extends%20Omi.Component%20%7B%0A%20%20%20%20constructor(data)%20%7B%0A%20%20%20%20%20%20%20%20super(data)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20render()%7B%0A%20%20%20%20%20%20%20%20return%20%60%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20o-repeat%3D%22item%20in%20items%22%20o-if%3D%22item.show%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7B%24index%7D%7D-%20%7B%7Bitem.text%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%20o-repeat%3D%22subItem%20in%20item.arr%20by%20%24subIndex%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3Eparent%20index%3A%20%7B%7B%24index%7D%7D%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3Eparent%20item%20text%3A%7B%7Bitem.text%7D%7D%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3Esub%20index%3A%20%7B%7B%24subIndex%7D%7D%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3Esub%20item%20%3A%7B%7BsubItem%7D%7D%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%60%0A%20%20%20%20%7D%0A%0A%7D%0A%0AOmi.render(new%20List(%7B%0A%20%20%20%20items%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%20text%3A%20%27Omi%27%2C%20show%3A%20true%20%2Carr%3A%5B%27a%27%2C%27b%27%2C%27c%27%5D%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20text%3A%20%27dntzhang%27%2C%20show%3A%20true%2C%20arr%3A%5B%27d%27%2C%27e%27%5D%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20text%3A%20%27AlloyTeam%27%7D%0A%20%20%20%20%5D%0A%7D)%2C%22%23container%22)%3B')
|
||||
}else if(type==='hello'){
|
||||
goto('http://alloyteam.github.io/omi/example/playground/index.html?code=class%20Hello%20extends%20Omi.Component%20%7B%0A%20%20%20%20constructor(data)%20%7B%0A%20%20%20%20%20%20%20%20super(data)%3B%0A%20%20%20%20%7D%0A%20%20%20%20style%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%20%60%0A%20%20%20%20%20%20%20%20%20%20%20%20h1%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cursor%3Apointer%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%60%3B%0A%20%20%20%20%7D%0A%20%20%20%20handleClick(target%2C%20evt)%7B%0A%20%20%20%20%20%20%20%20alert(target.innerHTML)%3B%0A%20%20%20%20%7D%0A%20%20%20%20render()%20%7B%0A%20%20%20%20%20%20%20%20return%20%20%60%0A%20%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch1%20onclick%3D%22handleClick(this%2C%20event)%22%3EHello%20%2C%7B%7Bname%7D%7D!%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%60%3B%0A%0A%20%20%20%20%7D%0A%7D%0A%0AOmi.render(new%20Hello(%7B%20name%20%3A%20%22Omi%22%20%7D)%2C%22%23container%22)%3B');
|
||||
}else if(type==='hello_nest'){
|
||||
}else if(type==='repeat-ct') {
|
||||
goto('http://alloyteam.github.io/omi/example/playground/index.html?code=class%20Item%20extends%20Omi.Component%20%7B%0A%0A%20%20%20%20render()%7B%0A%20%20%20%20%20%20%20%20return%20%60%3Cdiv%3EHello%2C%20%7B%7Btext%7D%7D%3C%2Fdiv%3E%60%0A%20%20%20%20%7D%0A%7D%0A%0AOmi.tag(%27item%27%2CItem)%0A%0Aclass%20List%20extends%20Omi.Component%20%7B%0A%20%20%20%20constructor(data)%20%7B%0A%20%20%20%20%20%20%20%20super(data)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20render()%7B%0A%20%20%20%20%20%20%20%20return%20%60%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Citem%20o-repeat%3D%22item%20in%20items%22%20o-if%3D%22item.show%22%20data-text%3D%22%7B%7Bitem.text%7D%7D%22%3E%3C%2Fitem%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%60%0A%20%20%20%20%7D%0A%0A%7D%0A%0AOmi.render(new%20List(%7B%0A%20%20%20%20items%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%20text%3A%20%27Omi%27%2C%20show%3A%20true%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20text%3A%20%27dntzhang%27%2C%20show%3A%20true%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20text%3A%20%27AlloyTeam%27%7D%0A%20%20%20%20%5D%0A%7D)%2C%27%23container%27)%3B');
|
||||
}
|
||||
else if(type==='hello_nest'){
|
||||
goto('http://alloyteam.github.io/omi/example/playground/index.html?code=class%20Hello%20extends%20Omi.Component%20%7B%0A%0A%20%20%20%20style%20()%20%7B%0A%20%20%20%20%20%20return%20%20%60%0A%20%20%20%20%20%20%20%20%20%20h1%7B%0A%20%20%20%20%20%20%20%20%20%20%09cursor%3Apointer%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%60%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20handleClick(evt)%7B%0A%20%20%20%20%20%20alert(evt.target.innerHTML)%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20render()%20%7B%0A%20%20%20%20%20%20return%20%20%60%0A%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%09%3Ch1%20onclick%3D%22handleClick%22%3EHello%20%2C%7B%7Bname%7D%7D!%3C%2Fh1%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%60%0A%20%20%20%20%7D%0A%7D%0A%0AOmi.tag(%27hello%27%2C%20Hello)%0A%0Aclass%20App%20extends%20Omi.Component%20%7B%0A%20%20%0A%20%20%20%20render()%20%7B%0A%20%20%20%20%20%20%20%20return%20%20%60%0A%20%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Chello%20data-name%3D%22Omi%22%3E%3C%2Fhello%3E%20%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%60%0A%20%20%20%20%7D%0A%7D%0A%0AOmi.render(new%20App()%2C%22%23container%22)');
|
||||
}else if(type==='repeat'){
|
||||
goto('http://alloyteam.github.io/omi/example/playground/index.html?code=class%20List%20extends%20Omi.Component%20%7B%0A%20%20%20%20constructor(data)%20%7B%0A%20%20%20%20%20%20%20%20super(data)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20render()%7B%0A%20%20%20%20%20%20%20%20return%20%60%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20o-repeat%3D%22item%20in%20items%22%20o-if%3D%22item.show%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7B%24index%7D%7D-%20%7B%7Bitem.text%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%60%0A%20%20%20%20%7D%0A%0A%7D%0A%0AOmi.render(new%20List(%7B%0A%20%20%20%20items%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%20text%3A%20%27Omi%27%2C%20show%3A%20true%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20text%3A%20%27dntzhang%27%2C%20show%3A%20true%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20text%3A%20%27AlloyTeam%27%7D%0A%20%20%20%20%5D%0A%7D)%2C%27%23container%27)%3B');
|
||||
|
|
|
|||
Loading…
Reference in New Issue