Omi v1.0.2发布正式支持传递javascript表达式
作者:【当耐特】 发布时间:2024-04-19 11:03:04
标签:Omi,v1.0.2发布,javascript,表达式
写在前面
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
0
投稿
猜你喜欢
- file 对象使用 open 函数来创建,下表列出了 file 对象常用函数read、readline、readlines区别:1.从文件读
- KNN算法算是最简单的机器学习算法之一了,这个算法最大的特点是没有训练过程,是一种懒惰学习,这种结构也可以在tensorflow实现。KNN
- 用两个文件.GLOBAL.ASA和online.asp下面分别给出两个文件的源代码.呵呵,我也是菜鸟,大家加油哟!<SCR
- 理科学生应该都了解过共轭吧,经常在数学或者物理还有化学中出现,在坐标轴上去描述共轭函数还是比较清晰的,py语言里也经常会出现关于共轭函数的使
- 使用celery在django项目中实现异步发送短信在项目的目录下创建celery_tasks用于保存celery异步任务。在celery_
- 最近看JavaScript高级程序设计,大有收获,接下来几天写一下读书笔记。之前写了一篇Ajax初步理解的随笔,里面有个函数用来创建XmlH
- Hihi, 大家好~ 最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小,但是却是前端开发中的基本,因为目前的网页,还是以文字信息
- Composer的基本使用在项目中使用composer.json在项目中使用composer,你需要有一个composer.json文件,此
- 由于opencv读入图片数据类型是uint8类型,直接加减会导致数据溢出现象(1)用Numpy操作可以先将图片数据类型转换成int类型进行计
- 相信学Python的小伙伴肯定有这样的尴尬局面,给一个函数不会用,原因是:不知道参数列表中的类型是什么意思,比如初学者都会疑问的:*args
- 最近在处理Qzone黄钻图标更新时,想起近期对业务图标进行优化所遇到的一些问题,把思绪收拾起来和大家一共探讨,欢迎多方声音。在实际工作中,图
- 调用时输入参数如: www.jb51.net/表示删除www.jb51.net首页的缓存, www.jb51.net/test.
- 1.padx表示在x轴方向上的边距一般用法是padx=10,表示距离左右两边组件的长度都为10还可以这么用,padx=(20,10),表示距
- 本文实例讲述了Python回文字符串及回文数字判定功能。分享给大家供大家参考,具体如下:所谓回文字符串,就是一个字符串,从左到右读和从右到左
- 简介学习慕课课程,Flask前后端分离API后台接口的实现demo,前端可以接入小程序,暂时已经完成后台API基础架构,使用 postman
- 1.概述mysql-monitor MYSQL 监控工具,优化工具,各种工具为一体的java spring boot 项目git地址:htt
- 遇到的问题:在做爬虫的时候,爬取的url链接内还有转义字符,反斜杠 \,打算用正则的re.sub()替换掉的时候遇到了问题,这是要做替换的字
- centos7用crontab进行mysql定时备份1、建立 mysql3306_backup.sh 文件文件名及路径可以自定义,个人习惯将
- 网站上的Banner条,是网站用来作为盈利或者是发布一些重要的信息的工具。但是它又不能作为网页的主要内容,因为它的主要目的是吸引人的注意力,
- 到底什么是Python?•Python是一种解释性语言。Python代码在运行之前不需要编译。其它解释性语言还包括PHP和Ruby。•Pyt