事件和可观察对象

# 反应性

在上一章的教程中，我们编写了以下代码来绑定按钮和命令对象之间的选中属性

button.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );

这行代码让我们可以使按钮具有反应性并反映命令的状态。例如，如果命令不允许运行，则相应的按钮应该不可点击。

上面描述的反应性是由 CKEditor 框架中使用的 可观察对象 启用的。可观察对象是在其属性发生更改时会触发事件的对象。这些更改可以被观察到并进行操作，这正是我们在 highlight 按钮上所做的事情。

在幕后，可观察对象使用更强大的 事件系统，类似于 DOM 中的事件系统。

# 可观察对象

让我们分析一下我们用来创建反应性按钮的代码。

# 创建可观察对象

编辑器中的许多类已经是可观察对象。这包括 Editor 类、Command 类、所有扩展 View 类的 UI 元素等等。

由于 ButtonView 类已经是可观察对象，因此除了创建新实例之外，我们无需执行任何其他操作。

const button = new ButtonView( locale );

然后，我们调用了 .set() 方法来更新一些按钮属性。

button.set( {
    label: t( 'Highlight' ),
    withText: true,
    tooltip: true,
    isToggleable: true
} );

如果要将自定义类设为可观察对象，请参阅 可观察对象 指南。

# 对用户输入做出反应

接下来，我们注册了一个回调函数，该函数将在每次触发 execute 事件（绑定到 DOM 中的 click 事件）时被调用

button.on( 'execute', () => {
    editor.execute( 'highlight' );
    editor.editing.view.focus();
} );

点击按钮会将焦点设置到该按钮上，使用户无法在不点击编辑视图的情况下继续输入。editor.editing.view.focus() 行将焦点返回到编辑视图，使用户可以在没有中断的情况下继续输入。

要了解有关焦点的更多信息，请参阅 焦点跟踪 文档。

# 绑定属性

最后，由于按钮和命令都是可观察对象，因此我们可以在它们之间绑定选定的属性

button.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );

上面的代码行将附加监听器，这些监听器将监听命令的 value 和 isEnabled 属性的更改，并相应地更新 isOn 和 isEnabled 按钮属性。

如果您直接使用事件系统，而不使用可观察对象提供的 bind(...).to(...) 抽象，代码将如下所示

command.on( 'change:value', ( event, propName, newValue, oldValue ) => {
    button.isOn = newValue;
} );

command.on( 'change:isEnabled', ( event, propName, newValue, oldValue ) => {
    button.isEnabled = newValue;
} );

# 下一步

如果要了解有关事件和可观察对象的更多信息，请参阅 可观察对象 和 事件系统 文档。

否则，请转到下一章，您将 了解有关处理键盘输入的更多信息，这同样使用了 CKEditor 的事件系统。