Question

如何在meteor Template.name.events中访问模板的元素？这是一个简单的购物车的例子，＆＃39;数量＆＃39;在购物车中无法访问。

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中，<h5 itemprop="name" class="product-list-name"> {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if} <a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" > {$product.name|truncate:45:'...'|escape:'html':'UTF-8'} </a> </h5> <p id="product_reference"{if empty($product->reference) || !$product->reference}"{/if}> <label>{l s='Model'} </label> <span class="editable undertitle" itemprop="sku">{if !isset($groups)}{$product->reference|escape:'html':'UTF-8'}{/if}</span> </p>参数指的是触发事件的元素的数据上下文。见here。不要在jquery事件中与this混淆，例如，它是对调用的DOM元素的引用。因此，您可以访问每个this的{{1}}，name和id。如果您想要输入的值，一种方法是使用表单并发送整个表单或将模板实例传递给事件并在那里查找，如此

cost

但是，我必须提到这将通过模板并找到类'qty'的第一个元素，在您的情况下，具有相同类的许多元素将无法实现您的目标。在您的情况下，您应该使用唯一ID。例如。你可以这样做

products

然后

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

在事件中。那个做得好。让我知道它是否适合你。

如何在事件上访问模板的dom元素？

1 个答案: