如何訪問事件模板的dom元素？

Question

如何在流星Template.name.events中訪問模板的元素？ 這是一個簡單的購物車的示例，不能在cart中訪問 “ qty”。

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參數是指觸發事件的元素的數據上下文。 看這里 。 例如，不要在jquery事件中this混淆，它是對DOM調用元素的引用。 因此，您可以訪問每個products 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;

在事件中。 那應該做的。 請讓我知道這對你有沒有用。