Templates

Templates are bound to DOM elements and use hyperHTML for rendering.

Usage

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

hyperNg.template(template);

Binding

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

import { Hyperbole } from 'hyperbole';
​
const hyperbole = new Hyperbole();

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