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

赞 (0)

相关推荐

  • 精通JS正则表达式(推荐)

    正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证 •替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字 •根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字 正则表达式语法 一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找文字主体时待匹配的一个或多个字符串

  • javascript 手机号码正则表达式验证函数 原创

    复制代码 代码如下: function checkMobile(){     var sMobile = document.mobileform.mobile.value     if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(sMobile))){         alert("不是完整的11位手机号或者正确的手机号前七位");         document.mobileform.mobile.focus();         return false;

  • js 常用正则表达式表单验证代码

    正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表

  • js各种验证文本框输入格式(正则表达式)

    不能为空 <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> 只能输入英文和数字<input onblur="if(/[^0-9a-zA-Z]/g.test(value))alert('有错')"><input onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"/><

  • 比较正宗的验证邮箱的正则表达式js代码详解

    fuchangxi的正则: 复制代码 代码如下: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ 开始必须是一个或者多个单词字符或者是-,加上@,然后又是一个或者多个单词字符或者是-.然后是点"."和单词字符和-的组合,可以有一个或者多个组合. 复制代码 代码如下: <script type="text/javascript"> function isEmail(str){ var reg =

  • 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 无法传递numbe

  • NCC Tools(never code counter tools) V1.0.1发布代码-代码统计工具

    界面如下图:把源代码存为(hta)文件,因为hta文件没有状态栏,所以我这里建议大家存为html文件,这样可以在状态栏下看到 NCC扫描的进度,我这里把NCC的maxloop设置为3000,所以文件统计到3000的时候,会自动终止,以防文件夹中文件太多造成运行的负担. 如果大家喜欢这样的代码,就请关注"Never Modules" 主要功能有- 1.可自己选择文件夹,或者单个文件. 2.自己选择文件后缀名进行统计 3.output information输出的数据有: 文件个数, 文件

  • sqlserver 批量数据替换助手V1.0版发布

    sqlserver 批量数据替换助手V1.0版发布

    这种方法操作繁琐,而且一般不是很懂数据库的人很难操作.于萌发了要写一个小程序的念头,经过两天时间的折腾这个小软件终于和各位见面了,希望各位童鞋多给点意见.说了这么些之后还是先上界面吧,^..^ 现在就来说说这个小程序的开发思路吧.第一步:通过 sp_helpdb系统存储过程得到SqlServer中的所有数据库名称. 复制代码 代码如下: #region 测试数据库连接,并显示数据库列表 /// <summary> /// 测试数据库连接,并显示数据库列表 /// </summary>

  • blog程序新版本V2.0 Beta完成,提供V1.0全部源码下载

    旧版本:v1.0 基本用vs2003和asp.net的Web控件完成,配合access数据库可实现web2.0的blog功能 现提供下载,注意事项: 1.源程序用于学习和研究asp.net之用,请不要用于商业. 2.本blog不提供v1.0版的技术支持!交流请email:iceok&163.com(&换@)给我 3.新版本现不提供源码,请不要索取! 4.谢谢大家的支持! 点击此处下载v1.0 新版本v2.0 改进v1.0版本,采用MS-Sql2000为数据库配合存储过程,当然access数

  • 浅谈Node新版本13.2.0正式支持ES Modules特性

    在本月 21 日,即2019.11.21,Node.js 发布了 13.2.0 版本,更新了一些特性.其中最令人兴奋的莫过于正式取消了 --experimental-modules 启动参数.这说明Node.js 正式支持 ES modules.我们一起来看看. Stability Index说明 Stability Index,即 Api 的稳定指数说明.它包括3个值: Stability: 0 ,不推荐使用.表示该Api官方不推荐使用,该功能可能会发出警告.不能保证向后兼容. Stabili

  • 超强分页类2.0发布，支持自定义风格，默认4种显示模式

    超强分页类2.0发布,支持自定义风格,默认4种显示模式 看到论坛上有人求百度分页类,所以把几周前的分页类贴出来.    2.0相对1.0修正如下:   1.支持PHP4和PHP5   2.增加了对ajax分页的功能   3.优化了程序整体结构   4.增加了自定义风格的功能 代码如下:  复制代码 代码如下: <?  /**   * filename: ext_page.class.php   * @package:phpbean   * @author :feifengxlq<feifeng

  • AJAX聊天室V1.0发布

    插件名称:ChatRoom 插件版本:v1.0 插件作者:Clear 插件支持BLOG版本:PJBlog2 v2.5.0125 版本说明: 使PJBlog2支持用户即时交流; AJAX无刷新,可在任何页面内即时通讯(不支持HTML代码); 支持快捷键; 向前一条对话记录 快捷键:↑ 向后一条对话记录 快捷键:↓ 提交对话 快捷键:Enter或Ctrl + Enter 清除 快捷键:Ctrl + Delete; 保存历史聊天纪录; 自动聚焦到发送消息框; 支持FireFox; 安装方法: 将以下C

  • 发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载

    好多天没有发过日志了~  最近写了一个图片浏览器,是为PHPCMS文件管理器设计的,但后来看到了Lightbox,所以就改了一下,可以给一般的网页使用. 演示及说明地址:  http://longbill.cn/down/sample/blueshow/index.htm 使用方法:   1.下载 blueshow.js文件,放到服务器上  你也可以直接使用这个: http://www.jb51.net/downtools/blueshow.js 2.在你要用此程序的网页中写上这句(在和之间):

  • 今天，小程序正式支持 SVG

    今天，小程序正式支持 SVG

    今天,小程序正式支持 SVG 写在前面 经过腾讯 Omi 团队的努力,今天你可以在小程序中使用 Cax 引擎高性能渲染 SVG! SVG 是可缩放矢量图形(Scalable Vector Graphics),基于可扩展标记语言,用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准.SVG 的优势有很多: SVG 使用 XML 格式定义图形,可通过文本编辑器来创建和修改 SVG 图像可被搜索.索引.脚本化或压缩 SVG 是可伸缩的,且放大图片质量不下降 SVG 图像可在任何的分辨

  • Breeze 文章管理系统 v1.0.0正式发布

    在经过了10多天的测试后,Breeze文章管理系统v1.0.0终于正式发布了,在此感谢支持Breeze及给予我帮助的广大网友^_^. 1.0.0版本在beta的基础上,修正了目前所发现在的一些bug,并对程序进行了一定的优化.假如在使用中发现什么问题,欢迎来论坛交流(http://phpsir.org/bbs),演示地址:http://phpsir.org. Breeze 文章管理系统是基于PHP+MySQL编写的开源且免费的文章发布系统,本系统基于GNU LGPL许可证发布(GNU LGPL地

随机推荐