Regarding the release of Omi v1.0.2, it officially supports code analysis for passing javascript expressions

This article mainly introduces the release of Omi v1.0.2 which officially supports passing javascriptexpression, which is very good and has reference value. Friends who need it can refer to it

Written in front

The Omi framework can pass attributes to child nodes by declaring data-* on the component.

Omi has been aligned with the standard delivery method of standard DOM tags since the beginning of its design. For example:

• The underline will be automatically converted to camel case, and when the data-page-index is passed to the sub-component, it will become this.data.pageIndex

• data- xx is passed to the child nodes and all become strings. For example, if data-page-index="1" is passed to the child node, this.data.pageIndex is the string "1"

This will What are the limitations and problems? For example:

• Cannot pass JSON

• Cannot pass number type

• Cannot pass bool type

Then supporting the passing of javascript expressions can solve these pain points.

Without further ado, let’s take a look at the colon of the artifact.

Colon mark

Look at the following example:

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

Add a colon in front of data-user: data-user , which means that what is passed is a js expression, which is convenient enough.

Then you can use it directly in the Hello component.

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

You can also try printing out this.data.user in the hello component.

Passing other types

The above example shows passing JSON, other types are also supported. For example:

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

Complex type

Finally, let me show you a slightly more complicated case:

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

Of course, In subcomponents, you can also traverse using the ES6+ posture instead of using the mustache.jstemplate engine syntax.

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

This is why omi provides two versions, omi.js and omi.lite.js. omi.lite.js does not include the mustache.js template engine.

The above is the detailed content of Regarding the release of Omi v1.0.2, it officially supports code analysis for passing javascript expressions. For more information, please follow other related articles on the PHP Chinese website!