title: Data binding Express-handlebars
body: <p>I'm developing shopping cart as part of my learning. </p>
  
  <p><strong>Homepage</strong>
  <a href="https://i.stack.imgur.com/Q6IN9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q6IN9.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>What I'm doing now:</p>
  
  <p><strong>views/index.hbs</strong>  </p>
  
  <pre><code>&lt;header&gt;
    &lt;div&gt;Shopping cart&lt;span class="badge"&gt;{{session.cart.totalQty}}&lt;/span&gt;&lt;div&gt;
  &lt;/header&gt;
    . . .
  &lt;a href="/add-to-cart/{{product._id}}"&gt;Add to Cart&lt;/a&gt;
  </code></pre>
  
  <p><strong>routes/index.js</strong></p>
  
  <pre><code>// Home page route
  router.get('/', function(req, res, next) {
  
    Product.find()
      .exec(function (err, products) {
        res.render('index', { products: products});
    });
  });
  </code></pre>
  
  <p><strong>routes/cart.js</strong>  </p>
  
  <pre><code>router.get('/add-to-cart/:id', function (req, res, next) {
  
    // access database and modify cart (update cart items quantity)
          req.session.cart = cart;
          res.redirect('/');    // redirect to Homepage
  });
  </code></pre>
  
  <p>The code above, when <code>Add to cart</code> button has been clicked, the <code>cart.totalQty</code> is updated and the page is reloaded.</p>
  
  <hr>
  
  <p><strong>Question:</strong>  Is it possible to implement the feature that after button has been clicked, <code>cart.totalQty</code> get updated and header's badge get automatically binded according to <code>cart.totalQty</code> and render without reloading the page?  </p>
  
  <p><strong>Note:</strong> I'm using "express-handlebars" modules i.e it's not included as handlebar.js in html.<br>
  Please tell me if I can provide more information.</p>