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>
  <wfc-button onclick="page.updateValue()">Set value to Updated</wfc-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 pageTitle = 'Binding variables';
        static html = html;
        basicBind = '';
        constructor() {
        updateValue() {
          this.basicBind = 'Updated';