Templates

Expressions and bindings

Templates are simply Javascript template literals. This means building template expressions is familiar and strait forward. There is a html tag function for rendering text as html.

Plain text variable: some value

Signal variable

Bound signalVar value

Dynamically computing HTML

First

Looping with Signals

Add value

Value: One

Value: Two

Value: Three

<!-- page.html -->
<div><strong>Plain text variable:</strong> some value</div>

<div>
  <div class="mc-font-title-large">Signal variable</div>
  <mc-textfield value="${page.signalVar}" oninput="page.signalVar.value = this.value" label="Update value"></mc-textfield>
  <div><strong style="color: #444">Bound</strong> ${page.signalVar}</div>
</div>


<div>
  <div class="mc-font-title-large">Dynamically computing HTML</div>
  <mc-switch checked="${page.showFirst}" onchange="page.showFirst.value = this.checked">Switch HTML</mc-switch>
  ${html(() => (
    page.showFirst.value ?
      html`<div>First</div>` :
      html`<div>Second</div>`
  ))}
</div>

<div>
  <div class="mc-font-title-large">Looping with Signals</div>
  <mc-textfield id="valueinput" placeholder="...value"></mc-textfield>
  <mc-button onclick="page.addValue(valueinput.value);">Add value</mc-button>
  ${html(() => page.loopVar.value.map(item => html`<div>Value: ${item.value}</div>`))}
</div>

<!--
  HTML comments can be used on expressions
  ${`commented out ${page.plainText}`}
-->

// page.js
import { Component } from '@thewebformula/lithe';
import htmlTemplate from './page.html';

class PageClass extends Component {
  static title = 'Template html file';

  // Load HTML template file
  static htmlTemplate = htmlTemplate;
  

  plainText = 'some value';
  signalVar = new Signal('signalVar value');
  loopVar = new Signal([
    { value: 'One' },
    { value: 'Two' },
    { value: 'Three' }
  ]);
  showFirst = new Signal(true);

  
  constructor() {
    super();
  }

  addValue(value) {
    if (!value) return;
    this.loopVar.value = [...this.loopVar.value, {value}];
  }
}
customElements.define('page-component-name', PageClass);

Template HTML

There are two methods for including template HTML in pages and components

HTML file
Page function

HTML file

<!-- page.html -->
<h3>Page</h3>
<div>Content</div>

// page.js
import { Component } from '@thewebformula/lithe';
import htmlTemplate from './page.html';

class PageClass extends Component {
  static title = 'Template html file';

  // Load HTML template file
  static htmlTemplate = htmlTemplate;
  
  constructor() {
    super();
  }
}
customElements.define('page-component-name', PageClass);

Page function

// page.js page function
import { Component, html } from '@thewebformula/lithe';

class PageClass extends Component {
  static title = 'Template function';

  // Load HTML template file
  static htmlTemplate = htmlTemplate;
  
  constructor() {
    super();
  }

  // Template function
  template() {
    return html`
      <h3>Page</h3>
      <div>Content</div>
    `;
  }
}
customElements.define('page-component-name', PageClass);