Basic binding
Value:
<input value="${page.basicBind}" oninput="page.basicBind = this.value">
<div>Value: ${page.basicBind}</div>
<mdw-button onclick="page.updateValue()">Set value to Updated</mdw-button>
<!--
If you do not bind the value attribute,
then changing the value outside of the input will not update the input
-->
<input oninput="page.basicBind = this.value">
<!--
Prevent content binding
you can disable content binding for individual elements
Add the attribute 'wfc-no-binding'
-->
<div wfc-no-binding>Value: ${page.basicBind}</div>
import { Component } from '@webformula/core';
import html from './page.html';
export default class extends Component {
static title = 'Binding variables';
static html = html;
basicBind = '';
constructor() {
super();
}
updateValue() {
this.basicBind = 'Updated';
}
}