CSS-Animation nicht mit Knockout-Code auf Knopfdruck feuern - und nicht Click-Ereignis zu versenden

Question

Ich bin in ein Problem mit einigen Knockout-Code aus einer CSS3-Animation feuern. Es funktioniert mit einem Codeblock und nicht mit einem anderen. Die Idee besteht darin, eine Animation anzuzeigen, wenn Sie einen Artikel zum Warenkorb hinzufügen. Das Objekt im Code, das nicht funktioniert, wird leer angezeigt, während das funktionierende Objekt die Produktbenachrichtigung 'div. Das andere Problem ist das $ ('# cart-nav a.first'). Click(); wird nicht gesendet, wenn diese Aktion ausgeführt wird. Dies funktioniert in keinem der beiden Szenarien.

Unten ist, wo der Code funktioniert (für die Animation), und ein anderer, wo es nicht funktioniert. Schätze jede Hilfe. Danke

Arbeitscode, bei dem CSS3-Animation ausgelöst wird, wenn Sie einen Artikel zum Einkaufswagen hinzufügen. Die Klasse 'Rise' löst die Animation aus. Ein funktionierender Block Code, der andere funktioniert nicht, und der JS darunter. Danke

Works

<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> 

nicht (für Debugging-Zwecke console.log da drin)

<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 Funktioniert

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

Der Hauptunterschied I Stelle ist dies :

Das Arbeitsdaten-bind bindet $data als this:

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

Knockout Unterschrift Standard-Klick-Handler ist:

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

Der nicht-Arbeitsdaten-bind $dataund das erste Argument von addProductToCart bindet:

function(data, event) { } 

die zu IhrempasstUnterschrift. Die zweite (fehlerhaft) Daten-bind schafft diese Parameter:

productMoreInfo(), $data, clickEvent 

d.h .: es fügt die zusätzlichen Parameter in bindan der Vorderseite der Argumentliste.

Die schnelle Lösung wäre, einen neuen Ereignis-Listener zu erstellen, der die zusätzlichen Parameter behandelt. Aber, würde ich stark vorschlagen, Ihren Ansatz insgesamt zu ändern. Sie sollten sich die afterRender, die css Bindungs- und benutzerdefinierten Bindungen ansehen. Vermeiden Sie DOM-bezogenen jQuery-Code in Ihren Ansichtsmodellen.