原文地址:https://github.com/AlloyTeam/omi/
寫在前面
Omi框架可以通過在元件上宣告 data-* 把屬性傳遞給子節點。
Omi從設計之初，就是往標準的DOM標籤的標準傳遞方式靠齊。比如：
- 下劃線自動轉駝峰， data-page-index傳到子元件就變成this.data.pageIndex
- data-xx 傳遞到子節點全都變成字串，如data-page-index="1"到子節點中this.data.pageIndex就是字串"1"
這樣會有什麼侷限性和問題？如：
- 無法傳遞JSON
- 無法傳遞number型別
- 無法傳遞bool型別
那麼支援傳遞javascript表示式就能解決這些痛點。
廢話不多說，來看神器的冒號。
冒號標記
看下面例子：
import Hello from 'hello.js'
Omi.makeHTML('Hello', Hello);
class App extends Omi.Component {
render() {
return `
<div>
<Hello :data-user="{ name : 'Dntzhang', favorite : 'Omi' }" />
</div>
`
}
}
Omi.render(new App(),"#container")複製程式碼在data-user前面加上冒號即:data-user，就代表傳遞的是js 表示式，夠方便吧。
然後在Hello元件內就可以直接使用。
class Hello extends Omi.Component {
render() {
return `
<div>
<h1>{{user.name}} love {{user.favorite}}.</h1>
</div>
`
}
}複製程式碼你也可以在hello元件內列印出 this.data.user 試試。
傳遞其他型別
上面的例子展示了傳遞JSON，其他型別也支援。比如：
<Hello :data-age="18" />複製程式碼 <Hello :data-xxx="1+1*2/3" />複製程式碼 <Hello :data-is-girl="false" />複製程式碼 <Hello :data-array-test="[1,2,3]" />複製程式碼當然也支援傳遞多個值：
<Hello :data-array-test="[1,2,3]" :data-is-girl="false" :data-age="18"/>複製程式碼當然你也可以使用:data合併到一起：
<Hello :data="{
arrayTest : [1,2,3],
isGirl : false,
age : 19
}"
/>複製程式碼複雜型別
最後給大家看個稍微一丁點複雜的案例:
class Hello extends Omi.Component {
handleClick(evt){
alert( this.data.arrayTest[0].name)
}
render() {
return `
<ul>
{{#arrayTest}}
<li onclick="handleClick">{{name}}</li>
{{/arrayTest}}
</ul>
`;
}
}
Omi.makeHTML('Hello', Hello);
class App extends Omi.Component {
render() {
return `
<div>
<Hello :data-array-test="[{name:'dntzhang'},{name:'omi'},{name:'AlloyTeam'}]" />
</div>
`;
}
}
Omi.render(new App(),"#container");複製程式碼當然，在子元件中，你也可以不使用 mustache.js模板引擎的語法去遍歷，使用ES6+的姿勢去遍歷。
class Hello extends Omi.Component {
render() {
return `
<ul>
${this.data.arrayTest.map(item =>
`<li>${item.name}</li>`
).join('')}
</ul>
`;
}
}複製程式碼這也是為什麼omi提供了兩個版本，omi.js和omi.lite.js的原因。omi.lite.js不包含 mustache.js模板引擎。
線上演示
相關
- Omi的Github地址github.com/AlloyTeam/o…
- 如果想體驗一下Omi框架，可以訪問 Omi Playground
- 如果想使用Omi框架或者開發完善Omi框架，可以訪問 Omi使用文件
- 如果你想獲得更佳的閱讀體驗，可以訪問 Docs Website
- 如果你懶得搭建專案腳手架，可以試試 omi-cli
- 如果你有Omi相關的問題可以 New issue
- 如果想更加方便的交流關於Omi的一切可以加入QQ的Omi交流群(256426170)