Skip to content

Templates

Jump to bottom
Brod edited this page Jun 27, 2018 · 8 revisions

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.

main.ts

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);

index.html

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

HyperHTML

hyperbolé provides access to most of hyperHTML's methods.

import { Hyperbole } from 'hyperbole';

Hyperbole.html`<el/>`;
Hyperbole.bind(node);
Hyperbole.wire(weakMap)`<el/>`;

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

Guides

Documentaion

Clone this wiki locally