Select element with jquery inside a handlebars each iteration

Question

I'm building for exercise a e-shop. I'm displaying a list of product in the HTML, using handlebars.

For every element I'm adding a button that should allow the user to add the item in the shopping cart. It's not working because every time I click on the button I add all the list and not only the single object.

So I know that I'm passing all the list (because I pass 'list' as argument), I was wondering how pass only the current item for every button. I'm not sure how to do it.

html:

  <div class="container-fluid">
    <script id="list-items" type="text/x-handlebars-template">​
      {{#each list}}
        <div class="items col-lg-3 col-md-4 col-sm-6 col-xs-12">
          Category: {{ category}} </br>
          Name: {{ name }} </br>
          Price: {{ price }} </br>
          Quantity: {{ quantity }}
          <button class="addItem" class="btn">Buy</button>
        </div>
      {{/each}}
    </script>
  </div>

javascript:

var ShoppingCart = function () {
  this.cart = [];
};

ShoppingCart.prototype.addItem = function(item) {
  this.cart.push(item);
};


shoppingCart = new ShoppingCart();

$('.addItem').click(function() {
  shoppingCart.addItem(list);
});

Answer 1

In your click function you add exactly the whole list:

shoppingCart.addItem(list);

And you do not need to transfer the whole item to be added. As you already have the whole list in the scope, you just need to let your function know what was the selected index. Possible solution could be to add index by handlebars into button id and then parse it in jQuery and proceed or consider replacing jQuery way to subscribe to on-click event with pure javascript solution and insert the index of the item withe help of handlebars, in the way:

<button class="addItem" class="btn" onclick="addItem({{@index}})">Buy</button>

Where addItem is:

function addItem(index) {
  shoppingCart.addItem(list[index]);
}