vincenius
6/20/2018 - 6:50 AM

Mustache Starter

Mustache Starter

main.js
content_copyfile_download
var listTpl;
var $list;

$( document ).ready( function() {
  // make the template globally accessible
  listTpl = $( '#list-tpl' ).html();
  $list = $( '#list' );
  
  let data = [{username: 'user 1'},{username: 'user 2'},{username: 'user 3'}]
  let rendered = Mustache.render( listTpl, data );
  $list.html( rendered );
});
index.html
content_copyfile_download
<!DOCTYPE html>
  <head>
    <title>Mustache Starter</title>
  </head>

  <body>
    <ul id="list">
      
    </ul>
    
    
    <script id="list-tpl" type="text/template">
      {{#.}}
        <li>{{username}}</li>
      {{/.}}
    </script>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
    <script src="main.js"></script>
  </body>

</html>