博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信
阅读量:6904 次
发布时间:2019-06-27

本文共 2269 字,大约阅读时间需要 7 分钟。

的ViewModel对象从其内部EventManager里继承了三个方法,$watch、$unwatch、$fire三个方法,它们就是我们本节的主题。

词如其名,非常直白,一看就知道做什么。我们先从$watch方法说起,它能监听当前的VM第一层的监控属性计算属性,如果某属性是一个对象,想监控其子孙属性,就需要定位到此对象上使用$watch回调了。$watch回调会默认传入先后两个属性值。

            
{
{aaa}}
{
{bbb}}
{
{$ccc}}
{
{ddd}}

enter image description here

如果属性非常多,我们可以监听$all这个特殊的属性名来得知所有属性的变动状况。

            
{
{aaa}}
{
{bbb}}
{
{$ccc}}
{
{ddd}}

enter image description here

我们也可以用$fire更改属性值。这样就可以打破不能触发非监控属性的回调的藩蓠,但要注意死循环,需要自己比较新旧值是否真的发生改变才触发。

            
{
{aaa}}
{
{bbb}}
{
{$ccc}}
{
{ddd}}

enter image description here

注意,$watch回调里是用ecma262 v6 提供的新API Object.is做新旧值比较,它的功能与=== 差不多,但能对付NaN这个自己也不等于自己的怪胎。另,一个对象字面量即便外形看上去一致,也是一个新对象,不会等于原来的。

            
{
{aaa}}
{
{nan}}
{
{$key}}
{
{el}}
{
{ddd}}

enter image description here

对于数组,我们只能监听数组长度的变化,不能监听其内部是否发生变化。

            
{
{el}}

enter image description here

如果你一定要监听数组每个元素的变化,可以使用1.3.4新添加的tick函数,这是一个心跳检测,只要函数返回false就会从检测列队中移除。由于是每30ms检测一次,非常耗性能,因此不用时记得移除。

            
{
{el}}

enter image description here

稍微说一下 $unwatch的用法,这个不太常用。如果它传入两个参数,第一个为属性名,第二个为回调,那么就会移除此用户,如果只传入此属性名,则移除此属性的所有监听函数。如果什么也不传,那么就会临时中断此ViewModel的属性监听功能,所有$watch回调都不会触发。想恢复也很简单,调用$watch方法,也是什么也不传。

我们最后看一下1.3.2新增的跨模块通信功能,我们通过在$fire的第一个参数一些前缀,就能触发其他模块的属性回调。它们分别是”up!”, “down!”, “all!”。上与下是根据当前ViewModel所在ms-controller元素在DOM树位置决定的。

  • up!xxx, 向上冒泡
  • down!xxx, 向下捕获
  • all!xxx, 全局广播

            by 司徒正美        

avalon vm.$fire的升级版

enter image description here

转载地址:http://wuldl.baihongyu.com/

你可能感兴趣的文章
类 不包含 方法的定义
查看>>
Servlet与JSP有什么区别?
查看>>
OK335xS psplash Screen 移植
查看>>
drop.delete.trauncat的区别
查看>>
状态栏 隐藏问题
查看>>
IIS
查看>>
ul li css 做横向菜单
查看>>
Android深入浅出系列之Socket—Socket编程(二)
查看>>
[原创]对于运行ASP.NET程序时,提示:无法启动程序“http://localhost:3532/Default.aspx”。的解决办法...
查看>>
[转载]在C#中使用异步Socket编程实现TCP网络服务的C/S的通讯构架(二)----使用方法...
查看>>
sencha touch 2--audio
查看>>
详细介绍Linux /etc/group文件
查看>>
解决w3wp.exe内存占用过高的方法
查看>>
basic4android 开发教程翻译(五)Android进程及activitys 生存周期
查看>>
设计模式--工厂方法模式
查看>>
如何防止你的UI出现了假死吗?
查看>>
教你如何迅速秒杀掉:99%的海量数据处理面试题
查看>>
使用FFmpeg捕获一帧摄像头图像
查看>>
请问在数据库中怎样用模糊查询查找含有通配符的项,比如 like ' ' 我要查找含有“%”的项,怎么查?...
查看>>
使用webdriver和beautifulsoup下载国家地理图片
查看>>