Omi v1.0.2 のリリースに関しては、JavaScript 式を渡すためのコード分析を正式にサポートします

この記事では主にjavascript式の配信をサポートするためのOmi v1.0.2の公式リリースを紹介します。これは非常に優れており、参考価値があります

前に書いてあります。

Omi フレームワークのプロパティは、コンポーネントで data-* を宣言することで子ノードに渡すことができます。

Omi は、最初から標準 DOM タグの標準配信方法に合わせて設計されています。例:

• アンダースコアは自動的にキャメルケースに変換され、data-page-indexはサブコンポーネントに渡され、this.data.pageIndexになります

• data-xxは子ノードに渡され、すべてになります。子ノードの this.data.pageIndex への data-page-index="1" などの文字列は、文字列 "1" になります

これの制限と問題は何ですか?例:

• JSONを渡すことができません

• 数値型を渡すことができません

• 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 id="user-name-nbsp-love-nbsp-user-favorite">{{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 の 2 つのバージョンを提供する理由です。 omi.lite.js には、mustache.js テンプレート エンジンが含まれていません。

以上がOmi v1.0.2 のリリースに関しては、JavaScript 式を渡すためのコード分析を正式にサポートしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。