Omi v1.0.2发布正式支持传递javascript表达式_javascript技巧_脚本之家

By admin in 澳门新葡亰娱乐官网 on 2019年12月15日

写在前头

Omi框架能够通过在组件上声称 data-* 把品质传递给子节点。

Omi从设计之初,正是往专门的学问的DOM标签的正经八百传递格局靠齐。比如:

下划线自动转驼峰, data-page-index传到子组件就改为this.data.pageIndex
data-xx
传递到子节点全都产生字符串,如data-page-index=”1″到子节点中this.data.pageIndex就是字符串”1″

那样会有哪些局限性和主题材料?如:

不能够传递JSON 不可能传递number类型 不可能传递bool类型

那么协理传递javascript表明式就能够缓慢解决那个痛点。

废话非常少说,来看神器的冒号。

冒号标识

import Hello from 'hello.js'Omi.makeHTML;class App extends Omi.Component { render() { return `    ` }}Omi.render,"#container")

在data-user前面加上冒号即:data-user,就意味着传递的是js 表达式,够方便呢。

下一场在Hello组件内就足以平素利用。

class Hello extends Omi.Component { render() { return `  {{user.name}} love {{user.favorite}}.  ` }}

您也得以在hello组件内打字与印刷出 this.data.user 试试。

传递别的类型

地方的事例浮现了传递JSON,其余品种也支持。比方:

复杂类型

终极给大家看个稍稍一丁点复杂的案例:

class Hello extends Omi.Component { handleClick{ alert( this.data.arrayTest[0].name) } render() { return ` 
  • {{name}}

`; }}Omi.makeHTML;class App extends Omi.Component { render() { return
`

`; }}Omi.render,”#container”);

当然,在子组件中,你也得以不应用
mustache.js模板引擎的语法去遍历,使用ES6+的架势去遍历。

class Hello extends Omi.Component { render() { return ` 
  • ${item.name}

`; }}

那也是怎么omi提供了三个版本,omi.js和omi.lite.js的原由。omi.lite.js不分包mustache.js模板引擎。

上述所述是作者给大家介绍的Omi
v1.0.2发表典型帮助传递javascript表达式,希望对咱们享有协助,假诺大家有其余疑问请给我留言,作者会及时过来大家的。在那也极度感激我们对剧本之家网址的支撑!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有