Adding helpers in mustache

by Rohit Patel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
<body>
  <p>
    Template Rendering with mustache
  </p>
  <select onchange="renderTemplates()" id="items">
    <option value="Item">Item
    </option>
    <option value="Laptop">Laptop
    </option>
    <option value="Bike">Bike
    </option>
    <option value="Car">Car
    </option>
  </select>
  <br>
  <span id="price">
  </span>
  <script id="price-template" type="x-tmpl-mustache">
    Price: {{#formatPrice}}{{price}}{{/formatPrice}}
  </script>
</body>

JavaScript

function renderTemplates() {
  var price = {
    "Laptop": 20000,
    "Bike": 50000,
    "Car": 500000
  }
  var city = document.getElementById('items').value;
  var price_template = document.getElementById('price-template').innerHTML;
  var rendered_price = Mustache.render(price_template, {
    price: price[city],
    formatPrice: function() {
      return function(val, render) {
        return (parseInt(render(val)) / 1000).toString() + "K";
      }
    },
  });
  document.getElementById('price').innerHTML = rendered_price;
}