Skip to content

Templates

Jump to bottom
Brod edited this page Oct 6, 2018 · 8 revisions

Templates are an extension of hyperHTML.

Usage

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

jagwah.Template(template);

Naming

You can choose to optionally name Templates, using a kebab-cased version of the Templates class name is a Jagwah convention but not required.

@Template('navigation-template')
export class NavigationTemplate {}

Binding

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

main.ts

@Selector('#navigation')
export class NavigationTemplate {
  constructor() {}
  public render(render: Jagwah.Template.render) {
    return render`
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    `;
  }
}

index.html

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

HyperHTML

Jagwah provides access to some of hyperHTML's methods, if you'd like access to more you can should add the hyperhtml package as a dependency.

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