Binding Attributes

Binding attributes allow the values in properties to be used or appear in different ways inside the component's HTML markup.

The following example uses the wr-text attribute binding. It will display the message property passed into the component in a div element. It is the equivalent to the same sample example that uses interpolation.

class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      message: true
    }
  }
  static get template() {
    return '<div wr-text="message"></div>';
  }
      
}

The following example uses an admin property with the wr-hide binding attribute to hide the div element if the property evaluates to false.

class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      admin: true
    }
  }
  static get template() {
    return '<div wr-hide="admin"></div>';
  }
      
}

Class

Use the wr-add-class attribute binding to add CSS classes to a component.

class MyButton extends wire.ui.WebComponent {

  static get properties() {
    return {
      color: true
    }
  }
  static get template() {
    return '<button class="btn" wr-add-class="color"></button>';
  }
      
}
customElements.define('my-button', MyButton);

<my-button color="btn-primary"></my-button>

Events

The wr-on* binding sets a callback for an element's native event.

The following example will call the myClick method on the web component when the button in the template is clicked.

class MyComponent extends wire.ui.WebComponent {

  myClick(ev) => {
    // handle click event
  }

  static get template() {
    return '<button wr-on-click="myClick"></button>';
  }
      
}

To add parameters to the event, use the WireBootstrap args formatter.

class MyComponent extends wire.ui.WebComponent {

  myClick(ev) => {
    // handle click event
  }

  static get template() {
    return '<button wr-on-click="myClick | args 'red'"></button>';
  }
      
}

There are many more attribute bindings are available to use. For a list and examples of each or to learn how to create your own bindings, visit the Tinybind bindings page.

Custom

To create your own bindings, add a function to the tinybind.binders object.

tinybind.binders.color = function(el, value) {
  el.style.color = value
}

And then use the bindings in a template.

<button wr-color="label.color">Apply</button>

Objects

In the examples above, primitive static values are passed into the component using it's attributes. Binding attributes also allow complex objects to be passed from one component to another.

Visit Objects for details.