Using Observers

A simple use case is shown below.

In this example, the created label will start with Hello World as its text value. When a user enters a value into the text input, the label will be updated with the new value.

How To

First import the components, binding classes and PCUI styles.

import { Observer } from '@playcanvas/observer';
import { Label, TextInput, BindingObserversToElement, BindingElementToObservers } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles';

Create a new observer for an object which contains a text string.

const observer = new Observer({
    text: 'Hello World'
});

Create a label which will listen to updates from the observer.

const label = new Label({
    binding: new BindingObserversToElement()
});

Link the observer to the label, telling it to use the text variable as its value.

label.link(observer, 'text');

Create a text input which will send updates to the observer.

const textInput = new TextInput({
    binding: new BindingElementToObservers()
});

Link the observer to the label, telling it to set the text variable on change.

textInput.link(observer, 'text');