關於Omi v1.0.2發布正式支援傳遞javascript表達式的程式碼分析

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

寫在前面

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 `
 <p>
 <Hello :data-user="{ name : &#39;Dntzhang&#39;, favorite : &#39;Omi&#39; }" />
 </p>
 `
 }
}
Omi.render(new App(),"#container")

在data-user前面加上冒號即:data-user ，就代表傳遞的是js 表達式，夠方便吧。

然後在Hello元件內就可以直接使用。

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

你也可以在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]" />

複雜型別#最後給大家看個稍微一丁點複雜的案例:

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(&#39;Hello&#39;, Hello);
class App extends Omi.Component {
 render() {
 return `
 <p>
 <Hello :data-array-test="[{name:&#39;dntzhang&#39;},{name:&#39;omi&#39;},{name:&#39;AlloyTeam&#39;}]" />
 </p>
 `;
 }
}
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(&#39;&#39;)}
 </ul>
 `;
 }
}

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

以上是關於Omi v1.0.2發布正式支援傳遞javascript表達式的程式碼分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！