Render simple array using Mustache.Js

Deeptechtons picture Deeptechtons · Apr 6, 2012 · Viewed 23.5k times · Source

Having a array like below

var arrNames = ["Stackoverflow","StackExchange","Webmaster","Programmers"];

how should a template look for working with mustache.js javascript template. I tried below but no clues

  • {{#}}{{key}}{{/}}

Answer

maxbeatty picture maxbeatty · Apr 7, 2012

From the documentation:

When looping over an array of strings, a . can be used to refer to the current item in the list.

Template:

{{#musketeers}} * {{.}} {{/musketeers}}

View:

{ "musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"] }

Output:

  • Athos
  • Aramis
  • Porthos
  • D'Artagnan

var tpl = document.getElementById('simple').innerHTML,
  view = {
    items: ['Stackoverflow', 'StackExchange', 'Webmaster', 'Programmers']
  };

document.getElementById('output').innerHTML = Mustache.to_html(tpl, view);
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
<script type="template" id="simple">
  <h1>Array Values</h1>
  <ul>
    {{#items}}
    <li>{{.}}</li>
    {{/items}}
  </ul>
</script>

<div id="output"></div>