Webformula core
Welcome Getting started Routing Serve / Build Binding variables Web component Fetcher Multiple languages github-circle-black-transparent GitHub github-circle-black-transparent Example app

Binding variables

Variables bind automatically and do not need any special code
Basic binding
Set value to Updated
  <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() {

    updateValue() {
      this.basicBind = 'Updated';