Formatters

Formatters are functions that mutate the incoming and/or outgoing value of a binding. You can use them to format dates, numbers, currencies, etc. and because they work in a similar fashion to the Unix pipeline, the output of each feeds directly as input to the next one, so you can stack as many of them together as you like.

tinybind.formatters.date = function(value){
  return moment(value).format('MMM DD, YYYY')
}

Formatters are applied by piping them to binding declarations using | as a delimiter.

<span wr-text="event.startDate | date"></span>

Computed

Computed values can be stored on an object as functions. Use the watch formatter to track changes on one or more dependent properties that must be passed as arguments.

Consider the person object in the example below.

const person = {
    firstName: "Jen",
    lastName: "Stevens",
    fullName: ()=> {
        return this.firstName + " " + this.lastName;
    }
}

In the binding below, the fullName function will be called each time the firstName or lastName properties change.

<label wr-text="fullName | watch firstName lastName"></label>

Event Args

It's not possible to pass parameters to a standard TinyBind event binding. Use the args formatter to pass parameters to an event.

In the following example, the word red is passed to the myClick click event.

class MyComponent extends wire.ui.WebComponent {

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

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

Property

Use the property formatter to dynamically reference a property on a object.

In the example below, the value in the name property on the item objects in the items array will be put into the label.

<ul>
  <li wr-each-item="items">
    <label><{item | property 'name'}<label>
  </li>
<ul>

The name parameter to the property formatter can be passed to the component as an attribute to make the reference dynamic.

class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      'property-name': true
  }
  static get templateUrl() {
    return './my-component.html';
  }
      
}

<!-- my-component.html -->
<ul>
  <li wr-each-item="items">
    <label><{item | property property-name}<label>
  </li>
<ul>

For more on formatters, visit the Tinybind formatters page.