riot.js学习【三】事件
2015-06-12 11:36
253 查看
每个自定义标签从编译到构建,到最后的销毁,riot.js都提供了相应的事件。
内置有4种事件:
update
在标签真正刷新UI前执行。它允许我们在更新UI前,改写context的数据
updated
在标签UI更新之后执行。这时候,我们可以对dom进行操作了
mount
在标签构建完成,放在页面后执行。
unmount
当标签从页面移除的时候执行。【一般是调用this.unmount()时执行】
打个例子:
效果如下:
输出分别为: update -> updated -> mount
因为没有调用this.unmount();
所以没打印出 unmount
事件的绑定,也可以类似jquery一样,一次绑定多个事件,又或者自己去触发事件
绑定多个:
触发事件:
新手遇坑:
unmount事件,在this.unmount()之后触发,或者自定义标签,重新构建时,自动触发
事件回调的第一个参数,并不是event
这一点跟jquery是大大的不一样
内置有4种事件:
update
在标签真正刷新UI前执行。它允许我们在更新UI前,改写context的数据
updated
在标签UI更新之后执行。这时候,我们可以对dom进行操作了
mount
在标签构建完成,放在页面后执行。
unmount
当标签从页面移除的时候执行。【一般是调用this.unmount()时执行】
打个例子:
<!Doctype html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="riot.js"></script> <script type="text/javascript" src="compiler.js"></script> </head> <body> <todo></todo> </body> <!-- 最前面一定要有空格或TAB --> <script type="riot/tag"> <todo> <p>一个自定义标签 BY { title || "" }</p> // 监听4种事件 // 执行顺序,跟绑定顺序无关 this.on("updated", function(){ // 这里可以操纵DOM console.log("updated"); }).on("mount", function(){ console.log("mount"); }).on("unmount", function(){ console.log("unmount"); }).on("update", function(){ // 这里可以注入数据 this.title = "da宗熊"; console.log("update"); }); </todo> </script> <script type="text/javascript"> riot.mount("todo"); </script> </html>
效果如下:
输出分别为: update -> updated -> mount
因为没有调用this.unmount();
所以没打印出 unmount
事件的绑定,也可以类似jquery一样,一次绑定多个事件,又或者自己去触发事件
绑定多个:
this.on("update mount", function(){ // update和mount都会经过这里 });
触发事件:
this.trigger("update", "参数1", "参数2"...);
新手遇坑:
unmount事件,在this.unmount()之后触发,或者自定义标签,重新构建时,自动触发
riot.mount("todo"); riot.mount("todo"); // 第二次会先触发unmount,然后才是update/updated/mount
事件回调的第一个参数,并不是event
this.on("update", function(a, b){ console.log(a, b); // 1, 2 }); this.trigger("update", 1, 2);
这一点跟jquery是大大的不一样
相关文章推荐
- 物联网技术上面临的基本问题和操作系统设计
- 物联网技术上面临的基本问题和操作系统设计
- riot.js学习【二】mixin
- riot.js 学习【一】自定义标签
- 初识riot.js
- 物联网技术上面临的基本问题和操作系统设计
- 使用AudioTrack进行音频播放
- 物联网之智能家居
- 拥抱 IoT 从这里开始
- iotop
- 物联网云平台调试手记
- 物联网,后会无期?
- VisionMobile:2015 IOT大趋势(三)数据是新通货
- 物联网技术上面临的基本问题和操作系统设计
- Go中iota是什么
- 华为推出物联网系统LiteOS
- Android Audio代码分析1 - AudioTrack使用示例
- android物联网初步,利用手机蓝牙与单片机通信,实现led灯开关和定时
- 物联网革命的核心是“网”,而不是“物”
- 物联网+ZigBee系统知识简介