Omi v1.0.2发布正式支持传递javascript表达式
作者:【当耐特】 时间:2024-04-19 11:03:04
写在前面
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模板引擎。
以上所述是小编给大家介绍的Omi v1.0.2发布正式支持传递javascript表达式网站的支持!
来源:http://www.cnblogs.com/iamzhanglei/archive/2017/03/21/6592928.html
标签:Omi,v1.0.2发布,javascript,表达式
0
投稿
猜你喜欢
python socket网络编程步骤详解(socket套接字使用)
2022-09-15 11:35:08
Python自动化运维和部署项目工具Fabric使用实例
2022-06-24 12:46:58
Python3中最常用的5种线程锁实例总结
2022-06-19 08:21:02
pandas实现数据读取&清洗&分析的项目实践
2022-01-31 09:55:05
python中json格式处理和字典的关系
2021-04-10 04:35:12
通过python实现弹窗广告拦截过程详解
2022-04-12 09:21:31
VSCode远程连接服务器报错:Could not establish connection to
2023-10-03 03:02:17
Python使用Plotly绘制常见5种动态交互式图表
2023-06-08 06:27:59
在EditPlus中配置Perl开发编译环境
2023-12-04 08:34:08
pycharm使用正则表达式批量添加print括号完美从python2迁移到python3
2021-11-06 15:30:35
Python rstrip()方法实例详解
2021-05-16 10:05:40
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2024-05-22 10:02:25
详解python调度框架APScheduler使用
2021-11-05 22:55:36
解决Jupyter无法导入已安装的 module问题
2022-05-13 07:14:18
MySQL安装starting the server失败的2种解决办法(推荐!)
2024-01-28 11:16:09
Dreamweaver快捷键大全
2007-11-05 14:08:00
Python正规则表达式学习指南
2021-04-11 15:21:16
Python基础语法(Python基础知识点)
2021-03-04 11:10:34
python使用pyshp读写shp文件的实现
2023-10-02 04:07:13
Python中整数的缓存机制讲解
2021-12-24 12:35:46