[AWDwR4] chapter 11 Play time 2th: use blind_up effect

来源：互联网发布：手机图片尺寸标注软件编辑：程序博客网时间：2024/05/02 02:05

chapter 11 Play time

Play time 2:
   使用Script.aculo.us JavaScript库中的blind_up效果代替隐藏cart这个div的过程。
   上网搜了一下，jquery中有blind这个效果，所以就用jquery中的hide("blind"),而不使用Script.aculo.us JavaScript库
   app/views/carts/destroy.js.erb这个文件可以有好几种写法，对照着可以加深理解：

   简单粗暴的方案A:

 $('#cart').hide("blind", 1000);

    这个方案在删除Cart时可以正常隐藏cart这个div，但是后续操作会有问题，你能看出来吗？


   使用hide会把当前的cart隐藏，下次Add Cart时，客户端执行 app/views/line_items/create.js.erb 产生的js代码时，由于不满足$('#cart tr').length == 1这个条件，所以 {$('#cart').show('blind', 1000);} 这句不会执行。

   修改后的方案B:

 $('#cart').html("<%= j render @cart %>"); $('#cart').hide("blind", 1000);

    由于在调用app/views/carts/destroy.js.erb这个模板时，cart中的line_items已经被清空了，所以render(@cart)后，cart这个div中只剩了total_line这个tr,下次Add Cart时，就不会出问题了。此时再调用 hide("blind")在垂直方向（默认）上隐藏cart这个div。

   官网的提示是使用jquery的not来选择除了 .total_line 的所有tr，并删除之,这样就不用 render @cart 了。下次Add To cart时，就可以正常显示cart这个div了。
        C，不需要render @cart的方案：

$('#cart tr').not(".total_line").remove();  $('#cart').hide("blind", 1000);

0 0