Omi框架学习之旅 - 通过omi-id来实现组件通讯 及原理说明
这个demo是通过omi-id来获取子类的实例,然后更改data属性,之后updata一下就好了。
老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。
class Hello extends Omi.Component {
constructor(data) {
super(data);
} style() {
return `
h1 {
cursor: pointer;
}
`;
} handleClick(target, click) {
console.log(target.innerHTML);
} render() {
return `
<div>
<h1 onclick="handleClick(this, event)">
Hello, {{name}}!
</h1>
</div>
`;
}
}; Omi.makeHTML('Hello', Hello); class App extends Omi.Component {
constructor(data) {
super(data);
} installed() {
Omi.get('hello').data.name = 'Sorrow.X'; // get方法是Omi上的一个静态方法
this.update();
} render() {
return `
<div>
<Hello omi-id="hello" />
</div>
`;
}
}; var app = new App();
Omi.render(app, 'body');
结果也一样哈
demo的疑问和疑问的说明:
疑问1:
<Hello omi-id="hello" />中的omi-id是什么鬼?对应的hello又是什么鬼?
答:
都是好鬼,而且都是女鬼。
omi-id呢,其实会把它对应的属性值就是hello,hello其实就是 Hello类的实例,然后呢就把 hello: Hello实例,放到了Omi.mapping = {};这个对象去了。
我们怎么取出实例呢,通过omi的静态get方法即可。
Omi.get = function(name){
return Omi.mapping[name]
}
来看看怎么实现的,如下
在这里给我们添加进Omi.mapping中的
然后就这么拿到了。
再然后女鬼就是你的了。
ps:
omi-id,是我个人比较喜欢的,因为可以跨组件拿到实例,然后想干嘛就干嘛,爽歪歪。
Omi框架学习之旅 - 通过omi-id来实现组件通讯 及原理说明的更多相关文章
- Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明
组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空 ...
- Omi框架学习之旅 - 之开篇扯蛋
说实话, 我也不知道Omi是干啥的, 只因此框架是alloyTeam出的, dntzhang写的, 也有其他腾讯大神参与了, 还有一些其他贡献者, 以上我也不太清楚, 当我胡说八嘎. 因其写法有人说好 ...
- Omi框架学习之旅 - Hello World 及原理说明
学什么东西都从hello world开始, 我也不知道为啥. 恩,先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. hello world - demo: class Hello e ...
- Omi框架学习之旅 - 插件机制之omi-touch 及原理说明
这个插件也能做好多好多的事,比如上拉下拉加载数据,轮播,等一切和运动有关的特效. 具体看我的allowTouch这篇博客,掌握了其用法,在来看它是怎么和omi结合的.就会很简单. 当然使用起来也比较方 ...
- Omi框架学习之旅 - 插件机制之omi-router及原理说明
先来看看官网的介绍吧:https://github.com/AlloyTeam/omi/tree/master/plugins/omi-router 其实我推荐直接看官网的介绍.我所写的,主要给个人做 ...
- Omi框架学习之旅 - 组件 及原理说明
hello world demo看完后其实基本的写法就会了. 但是omi中的组件是神马鬼?其实我也不知道组件是啥. 百度百科是这么说的: 是对数据和方法的简单封装.es6中,一个类其实也可以做到对方法 ...
- Omi框架学习之旅 - 生命周期 及原理说明
生命周期 name avatars company constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理 实例化 installed 安装完 ...
- Omi框架学习之旅 - 组件通讯(group-data通讯) 及原理说明
childrenData的方式可以批量传递数据给组件,但是有很多场景下data的来源不一定非要都从childrenData来, childrenData是个数组,会和组件的顺序一一对应,这就给不同传递 ...
- Omi框架学习之旅 - 插件机制之omi-transform及原理说明
给omi-transform插件做个笔记,使用起来也很爽. transform.js这个库,一直想写一篇帖子的,可是,数学不好,三维矩阵和二位矩阵理解的不好,所以迟迟没写了, 这也是一个神库,反正我很 ...
- Omi框架学习之旅 - 插件机制之omi-finger 及原理说明
以前那篇我写的alloyfinger源码解读那篇帖子,就说过这是一个很好用的手势库,hammer能做的,他都能做到, 而且源码只有350来行代码,很容易看懂. 那么怎么把这么好的库作为omi库的一个插 ...
随机推荐
- 列表中文字太多 溢出使用省略号css方法
我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替,实现以下效果: 文字太太太太多多多啦...... 这个不多. html:这是个列表.ul/ol都行. <ul> & ...
- layer插件layer.photos()动态插入的图片无法正常显示
layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常 有朋友遇到同样的问题 http://fly.layui.com/ji ...
- git 查看/修改用户名、密码
用户名和邮箱地址的作用 用户名和邮箱地址是本地git客户端的一个变量,不随git库而改变. 每次commit都会用用户名和邮箱纪录. github的contributions统计就是按邮箱来统计的. ...
- MVP架构分析与搭建
一个项目的核心就是架构 1.什么是MVP:MVP是一种项目架构设计模式. 其实MVP的本质就是将view和model完全隔离出来,通过Presenter (主持人) 统一调度管理.
- 洗礼灵魂,修炼python(10)--有趣的判断分支+从实例中掌握循环语句
所有的编程语言里都有判断语句和循环语句. 判断语句则是用来分支程序流程的 循环语句则是为了实现一个效果,让程序的规律性的重复操作 不用说,分支和循环自然在python里也是有的 一,条件判断:if,i ...
- python第三十三天----静态方法、类方法、属性方法
@staticmethod 装饰后,类中的方法转成静态方法 class a: @staticmethod def b(self): print('') 静态方法不可以访问实例变量或类变量,相当于类中的 ...
- python第六天 函数 python标准库实例大全
今天学习第一模块的最后一课课程--函数: python的第一个函数: 1 def func1(): 2 print('第一个函数') 3 return 0 4 func1() 1 同时返回多种类型时, ...
- 自定义mysql类用于快速执行数据库查询以及将查询结果转为json文件
由于每次连接数据库进行查询比较麻烦,偶尔还需要将查询结果转为json格式的文件, 因此暂时定义一个mysql的类,将这些常用的方法进行封装,便于直接调用(代码如下,个人用,没写什么注释). 注:导入了 ...
- July 10th, Week 29th Sunday, 2016
Everything is good when new, but friend when old. 老朋友更醇香. When did you meet with your last friends l ...
- Alpha冲刺! Day6 - 砍柴
Alpha冲刺! Day6 - 砍柴 今日已完成 晨瑶:讨论确定/解决了:网络判断使用广播方式.密集光点排布问题.丢失.db/记录html/多媒体文件的处理方式. 昭锡:Android工具包接口文档编 ...