title: How to register event on element in handlebars template, using data passed to that template
body: <p>In my ecommerce web app, a handlebars template for the cart is populated by the cart data model, obtained through an API.</p>
  
  <p>this is how the view is created</p>
  
  <pre><code>Cart.prototype.createView = function() {
  
      // render cart handlebars template
      var html = this.template(this.model);
  
      // save rendered template as view
      this.view = $(html);
  
      // insert into DOM
      $('.cart').html('');
      this.view.clone(true).appendTo($('.cart'));
  
  };
  </code></pre>
  
  <p>This is a part of the handlebars template</p>
  
  <pre><code>&lt;ul class="items"&gt;
  
      {{#each contents}}
  
          &lt;li&gt;
              &lt;span class="remove"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span class="price"&gt;{{this.pricing.rounded.with_tax}}&lt;/span&gt;
              &lt;span class="name"&gt;{{this.title}}&lt;/span&gt;
              &lt;span class="quantity"&gt;{{this.quantity}}&lt;/span&gt;
          &lt;/li&gt;
  
      {{/each}}
  &lt;/ul&gt;
  ...
  </code></pre>
  
  <p>Now how can I register an onClick event (e.g. with jQuery) to the <code>.remove</code> span, and use the data from the handlebars <code>#each</code> loop? In particular: the product ID, so I can do the "remove product from cart" button.</p>
  
  <p>I know I could add the product ID to the DOM like so:</p>
  
  <p><code>&lt;span data-product-id="{{this.id}}" class="remove"&gt;...&lt;/span&gt;</code></p>
  
  <p>and then use it in the controller</p>
  
  <pre><code>Cart.prototype.initController = function() {
      var self = this;
      var container = $('.cart');
  
      // register click event on remove button
      container.on('vclick', '.remove', function() {
  
          // get product ID
          var productID = $(this).attr('data-product-id');
  
          // remove product from cart
          self.removeProduct(productID);
      });
  
  };
  </code></pre>
  
  <p><strong>But I don't want to do it like this. I don't want to put the productID into the DOM.</strong> So how can I properly register that event to the node created in a handlebars loop, while using the data that is passed to the template? I basically need to link the data to the view.</p>
  
  <p>I don't want to use messy solutions like loop through the data and DOM list arrays and link them via their array index. I'm sure there is a proper MVC style solution that I'm not seeing.</p>