Link Search Menu Expand Document

Using Observers

A simple use case is shown below.

In this example the created label will start with Hello World as it’s 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 and binding classes.

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

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