使用观察者

下面展示一个简单用例。

标签初始文本为 Hello World。用户在输入框输入新值时，标签会同步更新。

实现步骤

首先导入组件、绑定类和 PCUI 样式。

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

为包含文本字符串的对象创建观察者。

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

创建监听观察者更新的标签。

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

将观察者关联到标签，指定使用 text 变量作为其值。

label.link(observer, 'text');

创建向观察者发送更新的文本输入框。

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

建立绑定，指定在值变化时设置 text 变量。

textInput.link(observer, 'text');