双向数据绑定没看懂

来源:2-6 详情页-购物车(6)

Neo1024

2020-08-09 16:57:40

挂载在不同元素上的数据被修改了,为什么其他模块的挂载数据也刷新了?选择商品,购物车数据怎么刷新的?

写回答

1回答

好帮手慕慕子

2020-08-09

同学你好,可以参考如下解析理解:

  1. 当我们点击购物车区域的加减按钮时,改变chooseCount的值,然后调用 $('.left-item.active').click();主动触发左侧选项卡的点击事件

    http://img.mukewang.com/climg/5f2fd00809cd65bd10590361.jpg

  2. 触发左侧按钮的点击事件时,会调用Right.js中refresh方法,将数据传递给右侧列表

    http://img.mukewang.com/climg/5f2fd018096e710b10070317.jpg

  3. 调用refresh方法,也就是right.js中的initRightList方法,重新渲染右侧列表内容

    http://img.mukewang.com/climg/5f2fd02f097fcfb408970844.jpg

    这样就实现实现了点击购物车区域按钮时,同时改变右侧区域的内容

  4. 当点击右侧区域的加减按钮,改变商品数量时,会调用ShopBar下的renderItem方法

    http://img.mukewang.com/climg/5f2fd08c094a2c3009790692.jpg

    购物中的renderItems方法就会重新渲染购物车中的内容

    http://img.mukewang.com/climg/5f2fd100091b339109740749.jpg

    这样就实现了点击右侧区域内容,联动购物车内容

同学可以回顾课程,跟着老师的步骤写一写代码,或者下载源码结合代码实现的效果测试下,帮助自己的理解。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 6815 问题

查看课程