Question

我遇到一些问题，一些Knockout代码触发了CSS3动画。它适用于一个代码块，而不适用于另一个代码块。想法是在向购物车添加商品时显示动画。代码中不起作用的对象是空的，其中一个工作显示产品通知'div。另一个问题是$（'＃cart-nav a.first'）。click（）;执行此操作时不会调度。这在两种情况下均无效。

下面是代码的工作原理（用于动画），而另一个代码不用。感谢任何帮助。感谢

将项目添加到购物车时，CSS3动画会触发的工作代码。 “升级”类会触发动画。一个工作代码块，另一个不工作，以及下面的JS。谢谢

作品

<div class="thumbnail product-image medium">
    <div class="actions">
       <div class="product-notification-cont">
         <div class="product-notification"> Added to cart!</div>
       </div>
       <a href="#" class="button product-add-to-cart" data-bind="click:$root.addProductToCart.bind($data)">Add to Cart</a>
       <a href="#" class="button purple product-more-info" data-bind="click:$root.productShowMoreInfo.bind($data)">More Info</a>
    </div>
    <a href="" data-bind="attr:{href:'/#products/'+$data.id}">
       <img src="" data-bind="attr:{alt:$data.name, src:$root.servicePath+'products/'+$data.id+'/images/preview_image/medium?auth='+ax.JRR}" />
    </a>
</div>

不起作用

  <div class="product-info" data-bind="visible:!(productLoading())">
      <h2 data-bind="text:product().name"></h2>
      <div class="product-description" data-bind="html:product().description">
      </div>
      <div class="product-notification-cont"> 
        <div class="product-notification"> Added to cart! </div>
      </div>   
      <button class="button" data-bind="click:addProductToCart.bind($data,productMoreInfo())">Add to Cart</button>

        <? } else { ?>
      <h3><?=l(23)?></h3>
    <? } ?>
  </div>

JS（用于调试目的的console.log）

 self.addProductToCart = function(data, event) {
      var $productNotification = $(event.target).prev().children('.product-notification');
      console.log($productNotification);
      ax.Cart.addCartItem({product_id:data.id, name:data.name, description:data.description});
     $('#cart-nav a.first').click();
     $productNotification.addClass('rise');

     $productNotification.on('animationend',function() {
        $(this).removeClass('rise');
    });
 };

Answer 1

我发现的主要区别是：

工作数据绑定将$data绑定为this：

data-bind="click:$root.addProductToCart.bind($data)"

无效数据绑定绑定$data 和 addProductToCart的第一个参数：

data-bind="click:addProductToCart.bind($data,productMoreInfo())"

Knockout的默认点击处理程序签名是：

function(data, event) { }

与您的addProductToCart签名相匹配。第二个（错误的）数据绑定创建这些参数：

productMoreInfo(), $data, clickEvent

即：它将bind 中的其他参数添加到参数列表的前面。

快速解决方案是创建一个处理额外参数的新事件监听器。然而，我强烈建议完全改变您的方法。您应该查看afterRender，css绑定和自定义绑定。在视图模型中避免使用与DOM相关的jQuery代码。

CSS动画不会在点击按钮时使用Knockout代码触发 - 而不是调度click事件

1 个答案: