javascript - 单击按钮时 CSS 动画不会使用 Knockout 代码触发 - 并且不会调度单击事件

Question

我遇到了一些 Knockout 代码触发 CSS3 动画的问题。它适用于一个代码块，而不适用于另一个代码块。这个想法是在您将商品添加到购物车时显示动画。代码中不工作的对象是空的，而工作的对象显示产品通知的 div。另一个问题是 $('#cart-nav a.first').click();执行此操作时不会分派(dispatch)。这在任何一种情况下都不起作用。

下面是代码工作的地方(用于动画)，另一个是不工作的地方。感谢任何帮助。谢谢

将商品添加到购物车时触发 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

我发现的主要区别是:

工作数据绑定(bind)将 $data 绑定(bind)为 this:

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

无效的数据绑定(bind)绑定(bind) $data 和 addProductToCart 的第一个参数:

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

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

function(data, event) { }

与您的 addProductToCart 签名相匹配。第二个(错误的)数据绑定(bind)创建了这些参数:

productMoreInfo(), $data, clickEvent

即:它添加 bind 中的附加参数到参数列表的前面。

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