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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 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
PHP+DBM的同学录程序(5)
2006/10/09 PHP
php a simple smtp class
2007/11/26 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php单例模式实现方法分析
2015/03/14 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
Vue声明式渲染详解
2017/05/17 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
python的socket编程入门
2018/01/29 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
高一课前三分钟演讲稿
2014/09/13 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
公司车队管理制度
2015/08/04 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
Golang Web 框架Iris安装部署
2022/08/14 Python