Omi v1.0.3發佈 – 正式支持傳遞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表達式就能解決這些痛點。

廢話不多說，來看神器的冒號。

冒號標記

看下面例子：

Crayon Syntax Highlighter v_2.7.2_beta

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

[Format Time: 0.0041 seconds]

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

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

Crayon Syntax Highlighter v_2.7.2_beta

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

[Format Time: 0.0017 seconds]

你也可以在hello組件內打印出 this.data.user 試試。

傳遞其他類型

上面的例子展示了傳遞JSON，其他類型也支持。比如：

Crayon Syntax Highlighter v_2.7.2_beta

<Hello :data-age="18" />

[Format Time: 0.0004 seconds] Crayon Syntax Highlighter v_2.7.2_beta

<Hello :data-xxx="1+1*2/3" />

[Format Time: 0.0004 seconds] Crayon Syntax Highlighter v_2.7.2_beta

<Hello :data-is-girl="false" />

[Format Time: 0.0005 seconds] Crayon Syntax Highlighter v_2.7.2_beta

<Hello :data-array-test="[1,2,3]" />

[Format Time: 0.0005 seconds]

當然也支持傳遞多個值：

Crayon Syntax Highlighter v_2.7.2_beta

<Hello :data-array-test="[1,2,3]" :data-is-girl="false" :data-age="18"/>

[Format Time: 0.0006 seconds]

當然你也可以使用:data合併到一起：

Crayon Syntax Highlighter v_2.7.2_beta

<Hello :data="{
                  arrayTest : [1,2,3], 
                  isGirl : false, 
                  age : 19
                }"
/>

[Format Time: 0.0005 seconds]

複雜類型

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

Crayon Syntax Highlighter v_2.7.2_beta

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

[Format Time: 0.0042 seconds]

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

Crayon Syntax Highlighter v_2.7.2_beta

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

[Format Time: 0.0027 seconds]

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

在線演示

• http://alloyteam.github.io/omi/website/redirect.html?type=exp
• http://alloyteam.github.io/omi/website/redirect.html?type=exp_arr

相關

• Omi的Github地址 https://github.com/AlloyTeam/omi
• 如果想體驗一下Omi框架，可以訪問 Omi Playground
• 如果想使用Omi框架或者開發完善Omi框架，可以訪問 Omi使用文檔
• 如果你想獲得更佳的閱讀體驗，可以訪問 Docs Website
• 如果你懶得搭建項目腳手架，可以試試 omi-cli
• 如果你有Omi相關的問題可以 New issue
• 如果想更加方便的交流關於Omi的一切可以加入QQ的Omi交流羣(256426170)