起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2597|回复: 7

[结贴] List组件在上面的BUG,求修复

[复制链接]

39

主题

144

帖子

415

积分

中级会员

Rank: 3Rank: 3

积分
415
QQ
发表于 2015-10-29 12:40:16 | 显示全部楼层 |阅读模式
本帖最后由 yyyy 于 2015-10-29 12:44 编辑

一、事件冒泡并没有被阻止

一直以为list组件执行两次是我代码的问题,最近在学做x5组件,自己做了一个list组件,终于让我找到原因了


bug.png


在list组件的代码(未压缩的)js中,使用了jquery在list容器上绑定了一个点击事件,return true应该是为了阻止冒泡,

但是在谷歌浏览器中却并不是这样的,在谷歌浏览器并没有阻止事件冒泡,导致被点击的节点上面被触发了一次。list组件的跟节点被触发了一次

一般情况下并没有什么问题,但是下面的这个框中,lsit组件在做当前 row 切换,这个就会导致被绑定在 循环出来的 节点中的数据绑定重复触发,
                this._getForeachNode().on('click', {                                comp : this
                        }, function(evt) {
                        evt.data.comp._doRowClick(evt);

                        evt.preventDefault();
                        // return true;
                });

把return true 改成  evt.preventDefault(); 就可以了,用谷歌做的测试

二、在list组件上面做函数绑定,触发次数相等于当前行的index

比如:我的list组件,我在li节点上面放了一张图片,使用 bind-attr-src: $model.toImgSrc( val( "fImageSrc " ) ) 绑定


第一个li 上面会是
          $model.toImgSrc  第一行的数据


第二个li
                 $model.toImgSrc  第一行的数据
                 $model.toImgSrc  第二行的数据

第三个li
                 $model.toImgSrc  第一行的数据
                 $model.toImgSrc  第二行的数据
                 $model.toImgSrc  第三行的数据
第N个li
                 $model.toImgSrc  第一行的数据
                 $model.toImgSrc  第二行的数据
                      ............................
                 $model.toImgSrc  第N行的数据

就是一行都相当于在做数据循环,调用次数就是当前行的下标





4

主题

1579

帖子

2706

积分

内部用户

积分
2706
发表于 2015-10-29 15:12:09 | 显示全部楼层
首先感谢您提出的问题

下面我解释以下这两个点
1、事件中
event.stopPropagation(); //阻止了事件冒泡,但不会阻击默认行为
event.preventDefault(); // 不阻击事件冒泡,但阻击默认行为
return false; //阻止了事件冒泡,也阻止了默认行为
return true和没有return是一个逻辑事件继续,即不阻击事件冒泡也不会阻击默认行为
这里return true是为了保证开发者可以在任何节点上进行事件绑定;(这个点没有想到什么情况需要阻止默认行为)

2、在list组件上面做函数绑定,触发次数相等于当前行的index
这个问题也让我很困惑,我想不出什么情况能做出你这样的效果;
/UI2/system/components/justep/list/demo/news.w
这个案例就是这种方式bind src的

再次感谢你提出的问题,
你的案例能发一下吗?便于我们分析问题
回复 支持 反对

使用道具 举报

39

主题

144

帖子

415

积分

中级会员

Rank: 3Rank: 3

积分
415
QQ
 楼主| 发表于 2015-10-29 16:22:40 | 显示全部楼层
XiaoQLuo 发表于 2015-10-29 15:12
首先感谢您提出的问题

下面我解释以下这两个点

这样啊,那我做好案例请您看下,不过可能要晚上上传了,我们这边因为图片的重复绑定,导致我们的图片(simple组件上传的)一直在读取,如果能解决重复获取的事情那就好了
回复 支持 反对

使用道具 举报

39

主题

144

帖子

415

积分

中级会员

Rank: 3Rank: 3

积分
415
QQ
 楼主| 发表于 2015-10-29 16:51:05 | 显示全部楼层
XiaoQLuo 发表于 2015-10-29 15:12
首先感谢您提出的问题

下面我解释以下这两个点

不过行点击事件的 event 里面的 bindingContex 中的t rawData是什么东西  不是 rowData 吗 ?
回复 支持 反对

使用道具 举报

4

主题

1579

帖子

2706

积分

内部用户

积分
2706
发表于 2015-10-30 09:47:42 | 显示全部楼层
本帖最后由 XiaoQLuo 于 2015-10-30 09:51 编辑

$rawData没有错
通常情况下他等价于$object,但是绝不是row,row只是data组件上的东西;
而bind更底层,可以是任何的observable;
也就是说开发者可以自己在model上定义observable用于bind




回复 支持 反对

使用道具 举报

39

主题

144

帖子

415

积分

中级会员

Rank: 3Rank: 3

积分
415
QQ
 楼主| 发表于 2015-11-12 10:54:04 | 显示全部楼层
本帖最后由 yyyy 于 2015-11-12 11:00 编辑
XiaoQLuo 发表于 2015-10-30 09:47
$rawData没有错
通常情况下他等价于$object,但是绝不是row,row只是data组件上的东西;
而bind更底层,可以 ...

不好意思,因为某些原因,在加上单独的测试的确没有出现这个问题所以搁置了一下,但是现在当我把数据和我的操作全部一个个拆分之后终于找出来原因了,是哪个list的增量加载的问题,也就是list每次数据变动都在重新更新组件,并且是全部从头开始,因为浏览器渲染的数据较快,所以看起来是新增的,但是实际却是全部从头开始渲染行,也就是每次一新增就 list里面的节点全部清空,并且重新加载 refresh.png
回复 支持 反对

使用道具 举报

39

主题

144

帖子

415

积分

中级会员

Rank: 3Rank: 3

积分
415
QQ
 楼主| 发表于 2015-11-12 11:02:50 | 显示全部楼层
图片的每一行都在从头开始这个我还在拆,不知道是不是我们的操作问题,有些有,有些没有
回复 支持 反对

使用道具 举报

12

主题

2627

帖子

2866

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2866
发表于 2016-4-16 15:16:24 | 显示全部楼层
楼主, 你的问题解决了吗, 没有解决的话联系qq: 32706807
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2025-4-5 07:02 , Processed in 0.058080 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表