Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

删除dom后更新,listener出了个问题 #12

Open
occultskyrong opened this issue Dec 2, 2016 · 3 comments
Open

删除dom后更新,listener出了个问题 #12

occultskyrong opened this issue Dec 2, 2016 · 3 comments

Comments

@occultskyrong
Copy link

首先,感谢你分享这个思路和具体的实现逻辑。

我用你这个dist的bundle自己写了一个简单购物车逻辑,
具体的demo可以看下:
http://sky91.cn/demo/virtual_dom/index.html

遇到个问题,我在寻找解决办法,

当点击“-”按钮,把某个商品减到0之后,这个dom会销毁,
使用虚拟dom后,这个dom成功销毁了,
但是点击下一个商品的减之后,并没有效果,我打过console看过,此时第2个商品的click的this是第1个已经被删除的dom的jquery对象。
表现就是点击第2个的“+”按钮,第1个dom又回来了。。。

是否是销毁逻辑有问题?
还是我listener写的有问题?

难道说需要给第1个dom,在他销毁后还需要解绑。。

$('#cart_content')
            .on('click', '.good-add', function () {// 增加数量
                changeQuantity($(this), 1);
            })
            .on('click', '.good-sub', function () {// 减少数量
                changeQuantity($(this), -1);
            });

如果你有时间,是否能说下你的理解,再次感谢

@occultskyrong
Copy link
Author

从下往上的删除dom是没问题的,先把第3个商品减到0,再减2/1,这么做都没问题。

所有的dom都在,没有删除任何一个dom的时候也没问题。加减都是操作的对应的dom。

只有从上往下删除的时候是有问题的。。

@maiff
Copy link
Contributor

maiff commented Dec 8, 2016

@occultskyrong 我调试啦一天,我觉得应该是 jquery的问题,jquery应该把元素的属性缓存下来处理,然后当第一个被删除了,因为diff算法会把第一个点变成第二个点,自身的属性改变了,但是jquery的包装属性没变,这是坑得注意。
可以这么改:

var changeQuantity = function (e, qua) {
            var gid = e.parentNode.dataset.gid
                , good = GOODS[gid];
            good.quantity = parseInt(good.quantity) + qua;
            Calc.reset();
            container();
};

注意这里传的是dom对象后面的加减不要用$包装,还有,如果你用过react,你这个代码并不是最佳实践。

还有你是不是知呼上那个匿名回答的那个人。

@occultskyrong
Copy link
Author

@maiff
先谢谢,稍候我会试一下。

没用过react,整站基本上都是webpack去打包匿名+闭包来封装模块实现的。

主要是以前纯jQuery+ 自封装方法需要写的东西太多,尤其是监听这一块,dom的操作本身就慢,写个listener更麻烦。。

所以打算找个轮子改一下。
如果虚拟dom可以分拆一个组件的化,可能会直接封装进去,然后直接用这一个组件完成整个页面的构造。

当然,肯定会考虑上react。。
现在也在尝试。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants