CSSアニメーションはボタンをクリックしてノックアウトコードで発砲するのではなく、クリックイベントをディスパッチしません。

Question

ノックアウトコードがCSS3アニメーションで発生する問題が発生しています。 1つのコードブロックで動作し、別のコードブロックでは動作しません。アイデアは、カートにアイテムを追加するときにアニメーションを表示することです。作業していないコードのオブジェクトが空になり、1つの作業として製品通知 'divが表示されます。もう1つの問題は$（ '＃cart-nav a.first'）です。このアクションが実行されたときにディスパッチされません。いずれのシナリオでもこれは機能しません。

以下は、コードが動作する場所（アニメーションの場合）と、そうでない場合の場所です。助けをお待ちしています。ありがとう

カートにアイテムを追加すると、CSS3アニメーションが起動する作業コード。クラス 'rise'がアニメーションをトリガします。コードの1つの作業ブロック、それ以外の作業ブロック、およびその下の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

動作しません：

thisとして働いてデータバインドが$dataをバインド：-動作していないデータバインドが$dataとaddProductToCartの最初の引数をバインドする

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

：

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

ノックアウトのデフォルトのクリックハンドラのシグネチャは次のとおりです。

function(data, event) { } 

あなたのと一致します署名。第二の（不良）データバインドこれらのパラメータ作成：

productMoreInfo(), $data, clickEvent 

すなわちを.:それ引数リストの前面にbindで追加のパラメータを追加します。

すぐに解決できるのは、余分なパラメータを処理する新しいイベントリスナーを作成することです。 のように、あなたのアプローチを変えることを強くお勧めします。 afterRender、cssバインディングとカスタムバインディングを参照する必要があります。ビューモデルでDOM関連のjQueryコードを使用しないでください。