javascript - 如何访问事件模板的 dom 元素？

Question

如何访问meteor Template.name.events中模板的元素？这是一个简单的购物车的例子，购物车中的“数量”不可访问。

http://meteorpad.com/pad/nhgMaMKNMQEainhcY/Shopping%20cart

模板

<div class="col-sm-3">
   {{name}}
 </div>
 <div class="col-sm-3">
  ${{cost}}
 </div>
 <div class="col-sm-3">
  <input type="number" class="qty" length="3" min="1" max="5">
 </div>
 <div class="col-sm-3">
  <button class="btn btn-success add">Add</button>
 </div>

模板事件

Template.productsList.events({
  'click .add': function (event) {
    cart.push(this); 
    console.log(cart);


  }

Answer 1

在 Meteor 中，this 参数指的是触发事件的元素的数据上下文。请参阅here 。不要与 jquery 事件中的 this 混淆，它是对调用的 DOM 元素的引用。因此，您可以访问每个产品的name、id和cost。如果您想要输入的值，一种方法是使用表单并发送整个表单，或者将模板实例传递给事件并在其中查找，如下所示

Template.productsList.events({
  'click .add': function (event, template) {
    var qty = template.find('.qty').value;
    console.log(qty);
}

但是，我必须提到，这将遍历模板并找到类“qty”的第一个元素，在您的情况下，有许多具有相同类的元素不会让您达到目标。在您的情况下，您应该使用唯一的 ID。例如。你可以这样做

<input type="number" class="qty" id="product_{{id}}" length="3" min="1" max="5">

然后

var qty = template.find('#product_'+this.id).value;

在事件中。应该这样做。让我知道它是否适合您。