Objects

Binding attributes allow objects from one component to be passed into another.

In the following example, the my-page component uses my-component in it's template. The sourceProperty property is passed into my-component's message property using my-component's binding attribute wr-message.

class MyPage extends wire.ui.WebComponent {

  sourceProperty = "Hello web components"; 

  static get template() {
    return '<my-component wr-message="sourceProperty"></my-component>';
  }      
}
customElements.define('my-page', MyPage);

<!-- Output -->
<div>Hello web components</div>

Property Reference

In the previous example, sourceProperty was a primitive string value. In the example below, sourceProperty is changed to an object with a single property sourceMessage. The same value is passed into my-component by setting the binding attribute wr-message to sourceMessage on sourceProperty.

class MyPage extends wire.ui.WebComponent {

  sourceProperty = {
    sourceMessage: "Hello web components"; 
  }

  static get template() {
    return '<my-component wr-message="sourceProperty.sourceMessage"></my-component>';
  }      
}

Object Reference

In the example below, rather than passing a single property on sourceProperty into my-component, the object itself is passed into my-component.

class MyPage extends wire.ui.WebComponent {

  sourceProperty = {
    sourceMessage: "Hello web components"; 
  }

  static get template() {
    return '<my-component wr-message="sourceProperty"></my-component>';
  }      
}

The object can then be referenced in my-components' template using the local property message.

class MyComponent extends wire.ui.WebComponent {

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