diff --git a/example/repeat-custom-tag/main.js b/example/repeat-custom-tag/main.js index 60aa2c110..d3cd5afd5 100644 --- a/example/repeat-custom-tag/main.js +++ b/example/repeat-custom-tag/main.js @@ -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 `
- +
` } diff --git a/tutorial/omi-v1.5-release.md b/tutorial/omi-v1.5-release.md index df46c1fff..1a690de6a 100644 --- a/tutorial/omi-v1.5-release.md +++ b/tutorial/omi-v1.5-release.md @@ -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 `
+
+ {{$index}}- {{item.text}} + +
+
` + } + +} + +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 `
Hello, {{text}}
` + } +} + +Omi.tag('item',Item) + +class List extends Omi.Component { + constructor(data) { + super(data); + } + + render(){ + return `
+ +
` + } + +} + +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) diff --git a/website/redirect.html b/website/redirect.html index 904dfcf11..a5d428a2d 100644 --- a/website/redirect.html +++ b/website/redirect.html @@ -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');