title: Trying to replicate this jQuery template using handlebars
body: <p>I've just came across of handlebars last night and it seems a good way of separating HTML template from your javascript/jQuery code. But I'm having a problem replicating a small simple code in handlebar.</p>
  
  <p>I'm trying to output the item <code>Price * Quantity</code>, I'm having a trouble appending the subtotal of the items properly. When I added a new item to my basket it calculate the price of that item and shows it as a new element rather than adding it to the current totalPrice. It's probably because of the <code>{{#each this }}</code> in the subTotal as its iterating through the items again.</p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
  &lt;div class="panel-body"&gt;
        &lt;div class="row"&gt;
           {{#each this}}
           &lt;div class="col-sm-8"&gt;{{ Quantity }} {{ Product }}&lt;/div&gt;
           &lt;div class="col-sm-4" style="text-align: right;"&gt;{{ Price }}&lt;/div&gt;
           {{/each}}
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="panel-footer"&gt;
        &lt;h4 style="text-align: right;"&gt;
           Subtotal:
           {{#each this}}
           &lt;span class="total"&gt;{{calculate Price "*" Quantity}}&lt;/span&gt;
           {{/each}} 
        &lt;/h4&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my issue -- when it should be 3.98
  <a href="https://i.stack.imgur.com/SwAPw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SwAPw.jpg" alt="enter image description here"></a></p>
  
  <p>My handlebar calculate helper --</p>
  
  <pre><code>Handlebars.registerHelper('calculate', function (priceVal, operator, quantity) {
          priceVal = parseFloat(priceVal);
          quantity = parseFloat(quantity);
          return {
              "+": priceVal + quantity,
              "-": priceVal - quantity,
              "*": priceVal * quantity,
              "/": priceVal / quantity,
              "%": priceVal % quantity
          }[operator];
      })
  </code></pre>
  
  <p>jQuery Template that I want to replicate in handlebars</p>
  
  <pre><code> for (product in cartItems) {
          html += '&lt;div class="row" style="padding-bottom: 5px;"&gt;';
          html += '&lt;div class="col-sm-12"&gt;';
          html += '&lt;div class="col-sm-8"&gt;' + cartItems[product].Quantity + cartItems[product].Product + '&lt;/div&gt;';
          html += '&lt;div class="col-sm-4" style="text-align: right;"&gt;' + parseFloat(cartItems[product].Price).toFixed(2) + '&lt;/div&gt;';
          html += '&lt;/div&gt; &lt;/div&gt;';
          var priceInt = parseFloat(cartItems[product].Price);
          var quantityInt = parseFloat(cartItems[product].Quantity);
          totalPrice += priceInt * quantityInt || 0;
          $('.total').text(totalPrice.toFixed(2));
      }
  </code></pre>