jquery on example

demo.md

Demo

index.html

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>

<div class="parent">
  <div class="child">
    <div class="widget"></div>
    <button>Display Current Value</button>
  </div>
  <div>Current value of widget is: <span class="currentVal">N/A</div></div>
</div>

<script type="text/mustache" id="widgetTemplate">
  <hr>
  <h1>Blah Widget</h1>
  <div>Current value of widget is: <span class="widgetVal">{{val}}</span></div>
  <div>Rendered for {{times}} times.</div>
</script>

script.js

var widgetVal = 99999,
    times = 0;

$('.parent').on('click', '.child button', function(e){
  e.preventDefault();
  var currentVal = $('.child .widgetVal').text();
  $('.parent .currentVal').text( currentVal );
});

setInterval(function(){
  var tmpl = $('#widgetTemplate').html();
  widgetVal = widgetVal - 1; times = times + 1;
  var compiledTmpl = Mustache.render(tmpl, {val: widgetVal, times: times });
  $('.child .widget').html( compiledTmpl );
}, 2000);