HTML.js

A simple HTML in Javascript implementation featuring Model View Binding. It allows you to create HTML elements using template literals and bind them to your model.

Installation

npm install --save @dobschal/html.js

Examples

Hello World

The example below creates a simple div element with the text "Hello World" and appends it to the body.

import {html} from '@dobschal/html.js';

document.body.append(
    html`<div>Hello World</div>`
);

Model View Binding

The created view is bound to the count observable. When the count changes, the view is updated:

import {html} from '@dobschal/html.js';
import {Observable} from '@dobschal/observable';

const count = Observable(0);

const view = html`
    <p>👉 ${count}</p>
    <button onclick="${() => count.value++}">Count Up 🚀</button>
`;

document.body.append(...view);

Example for binding input values:

const name = Observable("Sascha");

const view = html`
    <p>👉 ${name}</p>
    <input type="text" value="${name}" />
`;

API

html

html is a tagged template literal function that creates an HTML element or elements from a template string.

// Create a div element with the text "Hello World"
const element = html`<div>Hello World</div>`;
console.log(element instanceof HTMLElement); // true

In case the HTML template contains multiple elements, an array of elements is returned! When appending to the DOM, you can use the spread operator to append all elements at once.

document.body.append(...html`
    <div>Hello World 1</div>
    <div>Hello World 2</div>
`);

Components

You can create components by defining a function that returns an HTML element.

function MyComponent() {
    return html`<div>Hello World</div>`;
}

function App() {
    return html`
        <div>
            ${MyComponent()}
        </div>
    `;
}

document.body.append(App());

Event Listeners

You can add event listeners to elements by using the standard HTML event attributes.

html`
    <button onclick="${() => console.log('Clicked')}">Click Me</button>
`;

Model View Binding

You can bind an observable to an element by using the observable directly in the template.

import {Observable} from '@dobschal/observable';

const count = Observable(0);

const view = html`
    <p>👉 ${count}</p>
    <button onclick="${() => count.value++}">Count Up 🚀</button>
`;

Conditional Rendering

You can conditionally render elements by using the ternary operator or the custom if attribute.

const show = Observable(true);

// With the ternary operator
const view = html`
    ${show ? html`<div>Hello World</div>` : null}
`;

// With the if attribute
const view = html`
    <div if="${show}">Hello World</div>
`;

List Rendering

You can render lists by using the map function on an array or observable array.

const items = Observable([1, 2, 3]);

const view = html`
    <ul>
        ${items.map(item => html`<li>${item}</li>`)}
    </ul>
`;

Author

Sascha Dobschal