template/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>data-template Demo</title>
    <link rel="stylesheet" href="style.css" />
    <style>
      main {
        display: flex;
        flex-wrap: wrap;
      }
      article {
        margin: 0.25rem;
        padding: 0.5rem;
        border-radius: 0.5rem;
      }
      .tags {
        display: flex;
      }
      .tag {
        display: inline-block;
        border: 1px solid #888;
        padding: 0.25rem;
        margin: 0 0.25rem;
        border-radius: 0.5rem;
      }
      .tag::before {
        content: '#';
      }
      @media screen and (max-width: 750px) {
        main {
          flex-direction: column;
        }
        article {
          min-width: 300px;
          margin-left: auto;
          margin-right: auto;
        }
      }
      @media (prefers-color-scheme: dark) {
        article {
          background-color: #444;
        }
      }
      @media (prefers-color-scheme: light) {
        article {
          background-color: #ccc;
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <header id="header" data-template="header.html"></header>
      <nav>
        <a href="app.html">SPA version</a> (with vanilla ionic)
        <br />
        <a href="form.html">form demo</a>
        <a href="counter.html">counter demo</a>
        <a href="search.html">search demo</a>
        <a href="edit.html">view and edit demo (fill form)</a>
        <a href="icon-list.html">multi-class name demo</a>
      </nav>
      <main id="main" data-template="article" data-bind="articles">
        loading articles...
      </main>
      <footer id="footer" data-template="footer.html"></footer>
    </div>
    <template data-name="article">
      <article>
        <input name="id" data-value="id" hidden />
        <h2 data-text="title"></h2>
        <div class="tags">
          <div class="tag" data-text="tags"></div>
        </div>
        <p data-text="intro" data-class="highlight"></p>
        <div>
          <img
            class="small"
            data-src="cover_image"
            data-alt="cover_alt"
            data-title="cover_title"
          />
        </div>
        <button data-disabled="archived" data-onclick="seeMore">
          see more
        </button>
        <div data-hidden="passed">Status: active</div>
        <div>
          <a data-href="detail">Details</a>
        </div>
      </article>
    </template>
    <script src="base.js"></script>
    <script>
      // scanTemplates(app) // scan all templates recursively
      renderTemplate(header) // or apply template on specific element
      renderTemplate(footer)
      /* see articles in server/main.ts */
      getJSON('/articles', articles => {
        articles.forEach(article => {
          article.seeMore = event => seeMore(event, article.id)
        })
        renderTemplate(main, { articles })
      })
      function seeMore(event, id) {
        console.log('see more:', { event, id })
      }
    </script>
  </body>
</html>