javascript - Updating the time using setInterval with Mustache Template -

i pretty new mustachejs , update current time using setinterval, when setinterval triggers causes mustache template empty.

using .append instead of .html adds container not want.

js:

var updateclock = function(){   var data = {     'date': getdate(),     'day': getday(),     'hour': gethour(),     'minute': getminute()   };    var template = $('#template').html();   $('.container').html(mustache.render(template, data)); };  updateclock(); setinterval(updateclock, 30000); 

html:

<div class="container">     <script type="text/html" id="template">       <div class="date-container row">         <div class="large-4 medium-4 small-8 columns">           <h3>{{date}}</h3>           <h5>{{day}}</h5>           <h5>             <span>{{hour}}</span>             <span>:</span>             <span>{{minute}}</span>           </h5>       </div>     </script> </div> 

you replacing template html in first updateclock(). put <script> template tags outside of container, or cache template, not need template every updateclock(). once @ start, , reuse it, won't matter if have replaced in html i.e.

var template = $('#template').html(); var updateclock = function(){   var data = {     'date': getdate(),     'day': getday(),     'hour': gethour(),     'minute': getminute()   };       $('.container').html(mustache.render(template, data)); };  updateclock(); setinterval(updateclock, 30000); 

i store , cache templates namespaced, not pollute global namespace, like:

var moustachetemplates =  {     clocktemplate :  $('#template').html(),     anothertemplate: $('#anothertemplate').html(),     andanotherone :  $('#andanothertemplate').html() }; 

and can use them sort of 'strongly typed'

eg

 $('.container').html(mustache.render(moustachetemplates.clocktemplate, data)); 

you, of course, have cache them before use of them