snippets

load templates from a url

• Templates can be loaded from external files with b.getTemplates(url).

• HTML content fore template is stored in <script> tags that have type="text/html" and data-template="NAME".

  This approach is used instead of using <template> tags because some browsers will attempt to load <img> tags inside of <template> tags even if the template is never used.

• (NOTE: The /versions/8/0/0/snippets/get-remote-templates/templates/ file that const url points to is shown under the templates.html heading below. The name difference is a result of the build process, but it's the same file.)

html

<div data-r="init"></div>

javascript

export const b = { init: "init" };

const url = `/versions/8/0/0/snippets/get-remote-templates/templates/`;

export async function init(_, __, el) {
  const data = await b.getTemplates(url);
  if (data) {
    el.replaceWith(b.render("remote-template"));
  } else {
    el.innerHTML = "Could not load templates";
  }
}

templates.html

<script type="text/html" data-template="remote-template">
  <div>This is content from the external template.</div>
</script>