javascript - 每次迭代在 Handlebars 内选择带有 jquery 的元素

Question

我正在 build 一家电子商店进行锻炼。我正在使用 Handlebars 在 HTML 中显示产品列表。

我为每个元素添加了一个按钮，允许用户将商品添加到购物车中。它不起作用，因为每次我单击按钮时，我都会添加所有列表，而不仅仅是单个对象。

所以我知道我正在传递所有列表(因为我将“列表”作为参数传递)，我想知道如何为每个按钮只传递当前项目。我不确定该怎么做。

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

在您的点击函数中，您准确地添加了整个列表:

shoppingCart.addItem(list);

并且您不需要传输要添加的整个项目。因为您已经在范围内拥有整个列表，所以您只需要让您的函数知道选择的索引是什么。可能的解决方案是通过 Handlebars 将索引添加到按钮 id 中，然后在 jQuery 中解析它并继续或考虑替换 jQuery 方式以使用纯 javascript 解决方案订阅点击事件，并在 Handlebars 的帮助下插入项目的索引，在方式:

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

addItem 是:

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