{ jtmpl 1.1.0

Succint front-end applications


Hello

Application



code
<!DOCTYPE html>

<!-- (1) Target, references template -->
<div id="target" data-jtmpl="#template"></div>

<!-- (2) Template, references model -->
<script id="template"
  data-model="#model"
  type="text/template">
  <label>
    Greet goes to
    <input value="{{who}}">
  </label>
  <h3>Hello, {{who}}</h3>
</script>

<!--(3) Data model -->
<script id="model" type="text/model">
  {
    who: 'world'
  }
</script>

<!--(4) Include jtmpl -->
<script src="jtmpl.js"></script>
  1. Define your target(s)

    [data-jtmpl] elements are automatically processed.

    Supported template source formats:

    • "#element-id": an element in current document
    • "url": content, fetched dynamically from URL
    • "url#element-id": document, fetched from URL, element referenced by id

    You can provide content for search engines and JavaScript-less agents in this tag. Or host template contents.

  2. Provide a template

    Template is usually linked to a data model. [data-model] format is the same as [data-jtmpl]

  3. The data model is a POJO (Plain Old JavaScript Object).

    And optional. If you don't provide one, an empty model is implied.

    Literal JavaScript objects and CommonJS modules are supported (though require function is not provided, for now)

    In this example, script type is set, in order to avoid JavaScript processing by the browser, as object literal is not recognized as valid code.

    Alternative CommonJS syntax would be:

    <script id="model">
      if (typeof module !== 'undefined') {
        module.exports = {
          who: 'world'
        }
      }
    </script>
    

    So you'd get syntax checking by the browser.

  4. Just include jtmpl somewhere. It will do its work when DOM is ready.

    Manual invocation (for [data-jtmpl]-less elements):

    jtmpl(
      '#target-id',
      'template contents or #template-id',
      { model: "object" }
    );