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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
Convert Seconds To Hours
Jun 16 Javascript
jQuery 创建Dom元素
May 07 Javascript
js工具方法弹出蒙版
May 08 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
详解Vue中的MVVM原理和实现方法
Jul 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
获得Google PR值的PHP代码
2007/01/28 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
微信跳一跳游戏python脚本
2020/04/01 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python使用Geany编辑器配置方法
2020/02/21 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
建筑施工实习自我鉴定
2013/09/19 职场文书
大学生先进事迹材料
2014/02/16 职场文书
运动会稿件50字
2014/02/17 职场文书
搞笑创意广告语
2014/03/17 职场文书
倡议书范文
2014/04/16 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
个人委托书范本
2014/09/13 职场文书
销售员态度差检讨书
2014/10/26 职场文书
2014年财政所工作总结
2014/11/22 职场文书
婚宴新娘致辞
2015/07/28 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL