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

QQ登录

只需一步,快速开始

查看: 2265|回复: 5

[结贴] 遇到个超有趣的难题,求大神解答

[复制链接]

104

主题

369

帖子

1173

积分

金牌会员

王小二

Rank: 6Rank: 6

积分
1173
QQ
发表于 2017-7-7 02:22:44 | 显示全部楼层 |阅读模式
页面渲染思路和原理:
                        suplyMsgData数据从服务器请求得到(目前测试阶段写死),其中返回的某一列可能会有json字符串之类的内容,需要处理后才能使用bind-*之类的方法进行渲染。

                        imgsData是用来存放图片数据的,类似于微信朋友圈,使用内外两个list嵌套渲染页面,通过唯一的消息ID(suplyMsgID)进行过滤。

                        根据suplyMsgData的唯一行ID获取到渲染的当前行。
                       
                        从suplyMsgData中取出渲染的当前行imgUrl,数据格式如: "../../test/imgs/head@3x.png","../../test/imgs/head@3x.png","../../test/imgs/head@3x.png","../../test/imgs/head@3x.png",
                        得到之后转成数组,然后遍历数组,将渲染的当前行ID和数组中每一个imgUrl存入 imgsData中,list组件感应到imgsData添加了数据,会自动渲染新的img到页面指定的容器(div)中。
                       
                        绑定的li查看设计器中,第二个list的img元素,bind-attr-srcobject.val("imgUrl")。
       

                原理说完了,如果还不够清楚,请自行查看  w页面结构,绑定方式,以及下面的getDate方法理解。

                说下问题:
                        情景描述:
                                上面思路中最关键的一点就是把suplyMsgData中当前渲染的行的imgUrl中的值转成数组,再遍历此数组将数组中的每一个元素和当前渲染行的ID给存储到imgsData中,问题就处在这一步上面。
                        问题:  
                                遍历数组时向imgsData中使用newData方法添加数据,此时进入死循环。  死循环可以查看for循环中的console语句在chrome控制台打印出来的内容判断。
                                并且可以看到 rowID有的会重复的打印出来,调试发现:
                                渲染suplyMsgData中第一行数据时正常;
                                在渲染第二行的时候,一开始的rowID为 20170520134531(suplyMsgData的第二行数据),然而当走到for循环时,循环的第二次,rowID又变成20170706162047。  
                       
                        !!!注意!!!:  此时当前for循环还没结束,并且此getDate方法的此次调用也没有按正常顺序执行结束(循环体内部,以及下面的return语句都没有执行),
                                                                然后函数又执行了一次getDate方法,调试指针又跳到了方法的第一行(debugger,已注释掉),并且rowID又变成20170706162047,诡异!!!!


                        其他的测试:
                                将imgsData.newData方法注释掉就一切正常。

                        猜测:  imgsData.newData是异步的?
                                        测试imgsData.newData是否异步:
                                                1 在model组件的onload事件中,newData了300次,并且打印出当前循环的索引j的值。
                                                2 在chrome控制台并查看:在循环结束之前并没有执行一次 console.log(11111111);
                                        基本可以排除 上面的猜测。
       
                        调试中从函数的调用栈中发现执行的内部是有一个  refresh  suplyMsgData的过程的,不知是否是此原因导致的。
                        这种偏框架底层的东西我了解还不够,暂时还没能力深入,所以来请大神解答一下。
               

                        这个问题其实挺有趣的,希望有兴趣的小伙伴可以把这份测试代码拿下来试一试。



                忠告:
                        第一次打开此页面的时候请保持for循环中的imgsData.newData方法为注释状态,
                        否则即使写了debugger语句,在chrome控制台打开之前(或者chrome设置了断点跳过),
                        浏览器也会被卡死关不掉,只能用任务管理器强杀,这个也挺让人头疼的。

test.zip

22.39 KB, 下载次数: 53

<a href="#自我介绍"/>点点点</a>
发表于 2017-7-7 11:10:35 | 显示全部楼层
我看你的 imgsData  的idColumn 属性是suplyMsgID
idColumn  是主键!不能重复的!
而你newData 的时候! suplyMsgID 是同一个值!这样本来就不对的!
ID 列重复!或导致list无法识别唯一行的!
你应该再定义一个id列作为主键,每次新增设置uuid 赋值!!不能使用suplyMsgID 的!


另外list中 bind 绑定的js 方法 ,传递当前行对象!直接是$object 就可以的!不需要传递id列的值!
直接写
$model.getDate($object)  传递行对象就行了!

你再改改试试吧!做好能给一个可以 直接 重现的案例!不要这么多注释!看着太乱了!
qq:1912779713
WeX5教程--WeX5下载
回复 支持 反对

使用道具 举报

104

主题

369

帖子

1173

积分

金牌会员

王小二

Rank: 6Rank: 6

积分
1173
QQ
 楼主| 发表于 2017-7-7 16:27:57 | 显示全部楼层
liangyongfei 发表于 2017-7-7 11:10
我看你的 imgsData  的idColumn 属性是suplyMsgID
idColumn  是主键!不能重复的!
而你newData 的时候! s ...

额 哈哈 废话是太多了 其实我是一边给自己写注释   整理了下思路

总之学习了,我再试一试,感谢!!!
<a href="#自我介绍"/>点点点</a>
回复 支持 反对

使用道具 举报

104

主题

369

帖子

1173

积分

金牌会员

王小二

Rank: 6Rank: 6

积分
1173
QQ
 楼主| 发表于 2017-7-7 16:50:16 | 显示全部楼层
本帖最后由 w1017894741 于 2017-7-7 17:01 编辑
liangyongfei 发表于 2017-7-7 11:10
我看你的 imgsData  的idColumn 属性是suplyMsgID
idColumn  是主键!不能重复的!
而你newData 的时候! s ...
$model  当前上下文
$parent  当前元素的父元素
$row     
$object 当前行
$element  当前渲染元素  
以上理解是否正确?  $row是所有行对象吗?

其实还有个问题,data组件中是否对某些特定的列名有规则不允许或者是不建议使用的?
比如 uid  source,添加这样的列在添加模拟数据(右击添加数据)时,点击“新增”,uid的列会自动增长,自己填写的也会被覆盖掉,之前有测试newData,测了一次是可以的。
没有做过多的测试,担心这样子会出问题。
现在后台是独立的,要更改uid名称也不太方便。
1.png

2.png


3.png




<a href="#自我介绍"/>点点点</a>
回复 支持 反对

使用道具 举报

发表于 2017-7-7 17:52:39 | 显示全部楼层
w1017894741 发表于 2017-7-7 16:50
$model  当前上下文
$parent  当前元素的父元素
$row     

http://docs.wex5.com/wex5-ui-question-list-2005/

$row 是list 上层的当前行!
$object是 list 里层对应当前行
分界线就是class属性 x-list-template 上层dom节点用$row ,下层的就是$object

字段递增,建议数据库中设置!
保存数据的时候!它不生效就行了
http://docs.wex5.com/wex5-ui-question-list-2173/
qq:1912779713
WeX5教程--WeX5下载
回复 支持 反对

使用道具 举报

104

主题

369

帖子

1173

积分

金牌会员

王小二

Rank: 6Rank: 6

积分
1173
QQ
 楼主| 发表于 2017-7-12 10:26:58 | 显示全部楼层
liangyongfei 发表于 2017-7-7 17:52
http://docs.wex5.com/wex5-ui-question-list-2005/

$row 是list 上层的当前行!

谢谢  可以结贴了
<a href="#自我介绍"/>点点点</a>
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-7-12 01:33 , Processed in 0.054848 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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