Concernant la sortie d'Omi v1.0.2, il prend officiellement en charge l'analyse de code pour passer les expressions javascript

Cet article présente principalement la version officielle d'Omi v1.0.2 qui prend en charge le passage des javascriptexpressions, qui est très bonne et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

est écrit devant

Le framework Omi peut transmettre des attributs aux nœuds enfants en déclarant data-* sur le composant.

Omi a été conçu pour s'aligner dès le début sur la méthode de livraison standard des balises DOM standard. Par exemple :

• Le trait de soulignement est automatiquement converti en casse chameau, et lorsque l'index de la page de données est transmis au sous-composant, il devient this.data.pageIndex

• data- xx est transmis aux nœuds enfants et tous deviennent des chaînes. Par exemple, data-page-index="1" dans le nœud enfant, this.data.pageIndex est la chaîne "1".

Ceci sera Quels sont les limites et les problèmes ? Par exemple :

• Impossible de transmettre JSON

• Impossible de transmettre le type de numéro

• Impossible de transmettre le type booléen

Ensuite, la prise en charge des expressions javascript peut résoudre ces problèmes.

Sans plus tarder, jetons un coup d’œil au côlon de l’artefact.

Marque deux-points

Regardez l'exemple suivant :

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

Ajouter un deux-points devant data-user , c'est-à-dire : data -user signifie que l'expression js est transmise, ce qui est assez pratique.

Ensuite, il peut être utilisé directement dans le composant Hello.

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

Vous pouvez également essayer d'imprimer this.data.user dans le composant hello.

Passer d'autres types

L'exemple ci-dessus montre le passage de JSON, d'autres types sont également pris en charge. Par exemple :

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

Type complexe

Enfin, laissez-moi vous montrer un cas un peu plus compliqué :

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

Bien sûr, dans les sous-composants, vous pouvez également parcourir en utilisant la posture ES6 au lieu d'utiliser la syntaxe moustache.js moteur de modèles .

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

C'est pourquoi omi propose deux versions, omi.js et omi.lite.js. omi.lite.js n'inclut pas le moteur de modèles moustache.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!