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.
Template html
Some plain text in a div
Plain text variable plainText value
Signal variable
Bound signalVar value
Dynamically computing HTML
First
Looping with Signals
Value: One
Value: Two
Value: Three
<!-- page.html -->
<mc-divider></mc-divider>
<div class="mc-font-title-medium">Template html</div>
<div>Some plain text in a div</div>
<div><strong>Plain text variable</strong> ${page.plainText}</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 work on expressions
${`commented out ${page.plainText}`}
-->
// page.js
import { Component } from '@thewebformula/lithe';
import htmlTemplate from './page.html';
export default class extends Component {
static title = 'Template html file';
// Load HTML template file
static htmlTemplate = htmlTemplate;
plainText = 'plainText 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}];
}
}
Templates
There are two methods for including templates 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';
export default class extends Component {
static title = 'Template html file';
// Load HTML template file
static htmlTemplate = htmlTemplate;
constructor() {
super();
}
}
Page function
// page.js page function
import { Component, html } from '@thewebformula/lithe';
export default class 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>
`;
}
}