Omi v1.0.2发布 - 正式支持传递javascript表达式
2024-10-16 21:39:08
原文地址:https://github.com/AlloyTeam/omi/
写在前面
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('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");
当然,在子组件中,你也可以不使用 mustache.js模板引擎的语法去遍历,使用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不包含 mustache.js模板引擎。
在线演示
- http://alloyteam.github.io/omi/website/redirect.html?type=exp
- http://alloyteam.github.io/omi/website/redirect.html?type=exp_arr
相关
- Omi的Github地址https://github.com/AlloyTeam/omi
- 如果想体验一下Omi框架,可以访问 Omi Playground
- 如果想使用Omi框架或者开发完善Omi框架,可以访问 Omi使用文档
- 如果你想获得更佳的阅读体验,可以访问 Docs Website
- 如果你懒得搭建项目脚手架,可以试试 omi-cli
- 如果你有Omi相关的问题可以 New issue
- 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)
最新文章
- php读取zip文件(删除文件,提取文件,增加文件)实例
- LeetCode:5_Longest Palindromic Substring | 最长的回文子串 | Medium
- LogBack sl4j 通过MDC实现日志记录区分用户Session[以Spring mvc为例]
- Queue 应用——拓扑排序
- Java API —— 异常
- Mongo服务器集群配置【转】
- Ubuntu_16.04_Lamp
- Dynamics CRM 删除字段时检测到有组件类型为查看的依赖组件而无法删除问题
- drf版本控制 和django缓存,跨域问题,
- Handshake failed due to invalid Upgrade header: null 解决方案
- aspx页面,取得Excel某列不同类型的数据为空
- 20.0-uC/OS-III移植
- Linux内核分析第九次作业
- .Net开源myrtille远程连接服务(支持SSH)
- CMS系统关键技术点总结(UrlRewrite、批量静态化、发送邮件)
- [CodeForces - 197F] F - Opening Portals
- ssh 免密登陆
- 为什么学习linux
- 3.Dubbo2.5.3快速启动Hello World
- JavaScript中的箭头函数
热门文章
- Fourier分析基础(二)——由级数导出连续Fourier变换
- [转载] A successful Git branching model/GIT分支管理是一门艺术
- Kafka 0.10 Metadata的补充
- 关于小程序swiper不显示图的那些事
- Unity编程标准导引-3.2 MonoBehavior 组件父类重构
- mysql忘掉密码
- WEB标准了解
- Java Web(十三) 使用javamail进行发送邮件,(使用QQ,163,新浪邮箱服务器)
- RunTime.getRuntime().exec()运行脚本命令介绍和阻塞
- h5标签基础 table表格标签