Was die Veröffentlichung von Omi v1.0.2 betrifft, unterstützt es offiziell die Codeanalyse für die Übergabe von Javascript-Ausdrücken

In diesem Artikel wird hauptsächlich die offizielle Version von Omi v1.0.2 vorgestellt, die die Übergabe von JavascriptAusdrücken unterstützt, was sehr gut ist und Referenzwert hat

steht vorne

Omi-Framework kann Attribute an untergeordnete Knoten übergeben, indem es data-* auf der Komponente deklariert.

Omi wurde so konzipiert, dass es sich von Anfang an an der Standardbereitstellungsmethode von Standard-DOM-Tags orientiert. Beispiel:

• Der Unterstrich wird automatisch in Kamel-Schreibweise umgewandelt, und der Datenseitenindex wird an die Unterkomponente übergeben und wird zu this.data.pageIndex

• data- xx wird an die untergeordneten Knoten übergeben und alle werden zu Zeichenfolgen. Beispielsweise ist data-page-index="1" im untergeordneten Knoten die Zeichenfolge „1“

Dies wird Was sind die Einschränkungen und Probleme? Zum Beispiel:

• JSON kann nicht übergeben werden

• Zahlentyp kann nicht übergeben werden

• Bool-Typ kann nicht übergeben werden

Dann kann die Unterstützung der Übergabe von Javascript-Ausdrücken diese Schwachstellen lösen.

Werfen wir ohne weitere Umschweife einen Blick auf den Doppelpunkt des Artefakts.

Doppelpunktzeichen

Sehen Sie sich das folgende Beispiel an:

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

Fügen Sie einen Doppelpunkt vor data-user hinzu Das heißt: data -user bedeutet, dass der js-Ausdruck übergeben wird, was praktisch genug ist.

Dann kann es direkt innerhalb der Hello-Komponente verwendet werden.

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

Sie können auch versuchen, this.data.user in der Hello-Komponente auszudrucken.

Übergabe anderer Typen

Das obige Beispiel zeigt die Übergabe von JSON, andere Typen werden ebenfalls unterstützt. Zum Beispiel:

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

Komplexer Typ

Zum Schluss möchte ich Ihnen einen etwas komplizierteren Fall zeigen:

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

Natürlich können Sie in Unterkomponenten auch die ES6+-Haltung zum Durchlaufen verwenden, anstatt die Syntax der mustache.js Template Engine zu verwenden.

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

Aus diesem Grund bietet omi zwei Versionen an: omi.js und omi.lite.js. omi.lite.js enthält nicht die Vorlagen-Engine mustache.js.

Das obige ist der detaillierte Inhalt vonWas die Veröffentlichung von Omi v1.0.2 betrifft, unterstützt es offiziell die Codeanalyse für die Übergabe von Javascript-Ausdrücken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!