Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式

更新時(shí)間：2017年03月21日 10:35:21 作者：【當(dāng)耐特】

這篇文章主要介紹了Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

寫在前面

Omi框架可以通過在組件上聲明 data-* 把屬性傳遞給子節(jié)點(diǎn)。

Omi從設(shè)計(jì)之初，就是往標(biāo)準(zhǔn)的DOM標(biāo)簽的標(biāo)準(zhǔn)傳遞方式靠齊。比如：

下劃線自動(dòng)轉(zhuǎn)駝峰， data-page-index傳到子組件就變成this.data.pageIndex
data-xx 傳遞到子節(jié)點(diǎn)全都變成字符串，如data-page-index="1"到子節(jié)點(diǎn)中this.data.pageIndex就是字符串"1"

這樣會(huì)有什么局限性和問題？如：

無法傳遞JSON
無法傳遞number類型
無法傳遞bool類型

那么支持傳遞javascript表達(dá)式就能解決這些痛點(diǎn)。

廢話不多說，來看神器的冒號(hào)。

冒號(hào)標(biāo)記

看下面例子：

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前面加上冒號(hào)即:data-user，就代表傳遞的是js 表達(dá)式，夠方便吧。

然后在Hello組件內(nèi)就可以直接使用。

class Hello extends Omi.Component {
 render() {
 return `
 <div>
 <h1>{{user.name}} love {{user.favorite}}.</h1>
 </div>
 `
 }
}

你也可以在hello組件內(nèi)打印出 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]" />

復(fù)雜類型

最后給大家看個(gè)稍微一丁點(diǎn)復(fù)雜的案例:

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");

當(dāng)然，在子組件中，你也可以不使用 mustache.js模板引擎的語法去遍歷，使用ES6+的姿勢去遍歷。

class Hello extends Omi.Component {
 render() {
 return `
 <ul>
 ${this.data.arrayTest.map(item =>
 `<li>${item.name}</li>`
 ).join('')}
 </ul>
 `;
 }
}

這也是為什么omi提供了兩個(gè)版本，omi.js和omi.lite.js的原因。omi.lite.js不包含mustache.js模板引擎。

以上所述是小編給大家介紹的Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: