ノックアウトonClickパラメータとして動的データを使用

Question

私は私のviewModelではないが使用したいaddToCart関数があります。

私はオブジェクト {"items":[ {"name":"siren","id":2,"image":"s3.amazon.com"}])

を持っており、私のノックアウトアプリで私の見解モデルで

：この行で

<div id="cart" class="shopify-buy__cart-scroll"> 
      <div class="shopify-buy__cart-items" data-bind="foreach: newcart.items"> 
       <div class="shopify-buy__cart-item"> 
        <div data-bind="style: { 'background-image': 'url(' + images + ')'}" class="shopify-buy__cart-item__image" alt="Product" style="background-repeat:no-repeat;background-size: contain;"></div> 
        <span class="shopify-buy__cart-item__title" data-bind="text: name"></span> 
        <span class="shopify-buy__cart-item__price" data-bind="text: price "></span> 
        <div class="shopify-buy__quantity-container"> 
         <button class="shopify-buy__btn--seamless shopify-buy__quantity-decrement" type="button"> 
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 7h8v2H4z"></path></svg> 
         </button> 
         <input class="shopify-buy__quantity shopify-buy__cart-item__quantity-input" type="number" min="0" aria-label="Quantity" data-bind="attr: {value: quantity}" style="height: 30px; border:solid 1px #d3dbe2 !important;padding-left:13px;" /> 
         <button class="shopify-buy__btn--seamless shopify-buy__quantity-increment" type="button" databind="click: addToCard(id)" > 
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12 7H9V4H7v3H4v2h3v3h2V9h3z"></path></svg> 
         </button> 

        </div> 
       </div> 
      </div> 
      <div class="shopify-buy__cart-bottom"> 
       <p class="shopify-buy__cart__subtotal__text" >SUBTOTAL</p> 
       <p class="shopify-buy__cart__subtotal__price"data-bind="text: total"></p> 
       <p class="shopify-buy__cart__notice">Shipping and discount codes are added at checkout.</p> 
       <button class="shopify-buy__btn shopify-buy__btn--cart-checkout" type="button">CHECKOUT</button> 
      </div> 
     </div> 

：<button class="shopify-buy__btn--seamless shopify-buy__quantity-decrement" type="button">

私は動的パラメータで、いくつかの機能を追加したいです。

<button class="shopify-buy__btn--seamless shopify-buy__quantity-incriment" type="button" databind="attr: {onclick:addToCart(id) }"> 

しかし、これは機能しません。私はどのように私のビューモデルに関数を追加せずにこれを行うことができます。それはただの目的であり、私はそのようにしたいと思います。

ありがとうございます！

Answer 1

html5データ属性の使い方あなたのノックアウトIDをあなたのクリック機能に入れる。

data-bind="attr: {'data-idfromko': id }" 

以下のスニペットを実行します。 `グローバルでaddToCart`関数は`オブジェクトwindow`さ

function model() { 
 
    var self = this; 
 
    this.theArray = ko.observableArray([{ 
 
    'id': 1, 
 
    'foo': 'bar' 
 
    }, { 
 
    'id': 2, 
 
    'foo': 'bar2' 
 
    }, { 
 
    'id': 3, 
 
    'foo': 'bar3' 
 
    }, ]); 
 

 
} 
 

 
var mymodel = new model(); 
 

 
$(document).ready(function() { 
 
    ko.applyBindings(mymodel); 
 
    $('.button').click(function(event) { 
 
    value = $(this).data("idfromko") 
 
    alert(value); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>id</th> 
 
     <th>foo</th> 
 
     <th></th> 
 
    </tr> 
 
    <</thead> 
 
     <tbody data-bind=foreach:theArray> 
 
     <tr> 
 
      <td data-bind="text:id"></td> 
 
      <td data-bind="text:foo"></td> 
 
      <td> 
 
      <button class="button" 
 
      data-bind="attr: {'data-idfromko': id }"> 
 
       click 
 
      </button> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
</table>