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> `; } }