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
Value:
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() {
          super();
        }
    
        updateValue() {
          this.basicBind = 'Updated';
        }
      }