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