Topics


Pages


Content

Minimal templating with {{mustaches}} in JavaScript

Example

Here we fetch gists from the GitHub API and render the data in a list.

  • index.html 
      <head>
      <script src="https://unpkg.com/mustache@latest"></script>
      <script src="assets/js/main.js"></script>
  </head>
      
  <body>
      <div id="target">
          <ol>
              <li>...</li>
              <li>...</li>
              <li>...</li>
              <li>...</li>
              <li>...</li>
              <li>...</li>
              <li>...</li>
              <li>...</li>
          </ol>
          <p><i>Loading...</i></p>
      </div>

      <script id="template" type="x-tmpl-mustache">
          <ol>
          {{ #gists }}
              <li>
                  <a href="{{ html_url }}">link</a> - <span>{{ description }}</span>
              </li>
          {{ /gists }}
          </ol>
      </script>

      <script>
          renderGists('MichaelCurrin');
      </script>
  </body>

The renderTemplate function here is generic and can be used across projects.

  • main.js 
      function gistsUrl(username, limit = 100) {
    return `https://api.github.com/users/${username}/gists?per_page=${limit}`;
  }

  function renderTemplate(templateId, data, targetId) {
    const template = document.getElementById(templateId).innerHTML;
    const rendered = Mustache.render(template, data);

    document.getElementById(targetId).innerHTML = rendered;
  }

  async function renderGists(username) {
    const url = gistsUrl(username);
    console.debug(url);

    const resp = await fetch(url);
    const json = await resp.json();
    renderTemplate('template', { gists: json }, 'target');
  }