Skip to content

Templates

Jump to bottom
Brod edited this page Jul 14, 2018 · 8 revisions

Templates are an extension of hyperHTML.

Usage

You can add Templates to Jagwah with the template() method.

jagwah.Template(template);

Binding

Templates can be bound to DOM elements (internally using the hyperHTML.bind(...)) method based on the $selector property of the Template class, it's recommended to bind on the id attribute.

main.ts

import { Jagwah } from 'jagwah';
​
const jagwah = new Jagwah();

export class NavigationTemplate {
  static $selector = '#navigation';
  constructor(
    private renderer: IHyperNgRenderer,
  ) {
    return renderer`
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    `;
  }
}
​
jagwah.Template(NavigationTemplate);

index.html

<body>
  <div id="navigation"></div>
</body>

HyperHTML

Jagwah provides access to most of hyperHTML's methods.

import { Jagwah } from 'jagwah';

Jagwah.bind(node);
Jagwah.wire(weakMap)`<tag/>`;
Jagwah.define('tag', ...)

For more information about how to use hyperHTML please checkout the Documentation.

Guides

Documentaion

Clone this wiki locally