Omi v1.0.2发布正式支持传递javascript表达式


Posted in Javascript onMarch 21, 2017

写在前面

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表达式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
扩展String功能方法
Sep 22 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 #jQuery
80%应聘者都不及格的JS面试题
Mar 21 #Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 #jQuery
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 #Javascript
JavaScript 中 apply 、call 的详解
Mar 21 #Javascript
You might like
5.PHP的其他功能
2006/10/09 PHP
PHP关联链接常用代码
2012/11/05 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
禁止IE用右键的JS代码
2013/12/30 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
浅析Vue 中的 render 函数
2020/02/28 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python爬取三国演义的实现方法
2016/09/12 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
什么是python类属性
2020/06/10 Python
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
工作失误检讨书范文大全
2014/01/13 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
时尚女魔头观后感
2015/06/04 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
python语言中pandas字符串分割str.split()函数
2022/08/05 Python