Home > Article > Web Front-end > 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 : 'Dntzhang', favorite : 'Omi' }" /> </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>{{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('Hello', Hello); class App extends Omi.Component { render() { return ` <p> <Hello :data-array-test="[{name:'dntzhang'},{name:'omi'},{name:'AlloyTeam'}]" /> </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('')} </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!