JSFiddle - React, Tailwind, and code Playground

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="cities">
    <option value="City">City
    <option value="Delhi">Delhi
    <option value="Bangalore">Bangalore
    <option value="Mumbai">Mumbai
  </select>
  <br>
  <span id="hotel"></span>
  <br>
  <span id="parks"></span>
  <script id="hotel-template" type="x-tmpl-mustache">
  	Hotel: {{hotel}}
  </script>
   <script id="park-template" type="x-tmpl-mustache">
  	Park: {{park}}
  </script>
</body>

JavaScript

function renderTemplates() {
	var hotel = {
  					"Delhi" : "JW Marriott New Delhi ",
  					"Bangalore" : "Vivanta Taj", 
  					"Mumbai" : "Oberoi Hotel"
  }
 var park = {
 		  			"Delhi" : "Lodhi Garden",
  					"Bangalore" : "Cubbon Park", 
  					"Mumbai" : "Sanjay Gandhi National Park"
 }
var city = document.getElementById('cities').value;
var hotel_template = document.getElementById('hotel-template').innerHTML;
var rendered_hotel = Mustache.render(hotel_template, {hotel: hotel[city]});
var park_template = document.getElementById('park-template').innerHTML;
var rendered_park = Mustache.render(park_template, {park: park[city]});
document.getElementById('hotel').innerHTML = rendered_hotel;
document.getElementById('parks').innerHTML = rendered_park;
}