这样会有什么局限性和问题?如:
那么支持传递 javascript 表达式就能解决这些痛点。
废话不多说,来看神器的冒号。
看下面例子:
- import Hello from 'hello.js'
- Omi.makehtml('Hello', Hello);
- class App extends Omi.Component {
- render() {
- return `
- <div>
- <Hello :data-user="{ name : 'Dntzhang', favorite : 'Omi' }" />
- </div>
- `
- }
- }
- Omi.render(new App(),"#container")
在 data-user 前面加上冒号即: data-user,就代表传递的是 js 表达式,够方便吧。
然后在 Hello 组件内就可以直接使用。
- class Hello extends Omi.Component {
- render() {
- return` < div > <h1 > {
- {
- user.name
- }
- }
- love {
- {
- user.favorite
- }
- }. < /h1>
- </div > `
- }
- }
你也可以在 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('Hello', Hello);
- class App extends Omi.Component {
- render() {
- return `
- <div>
- <Hello :data-array-test="[{name:'dntzhang'},{name:'omi'},{name:'AlloyTeam'}]" / > </div>
- `;
- }
- }
- Omi.render(new App(),"#container"); /
当然,在子组件中,你也可以不使用 模板引擎的语法去遍历,使用 ES6 + 的姿势去遍历。
- class Hello extends Omi.Component {
- render() {
- return `
- <ul>
- ${this.data.arrayTest.map(item =>
- `<li>${item.name}</li>`
- ).join('')}
- </ul>
- `;
- }
- }
这也是为什么 omi 提供了两个版本,omi.js 和 omi.lite.js 的原因。omi.lite.js 不包含 模板引擎。
来源: http://www.cnblogs.com/iamzhanglei/p/6592928.html