CKEditor5 Observables

在CKEditor5中除了事件系统外,还有另一个重要的系统就是可观测对象,俗称Observable对象。此对象的属性是可观测的,一段对象的属性发生改变,将会触发一个事件,监听此事件的代码片段可以做出一些相应的操作。

 

CK5定义一个可观测对象

import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
import mix from '@ckeditor/ckeditor5-utils/src/mix';

export default class SomeClass {
  constructor(){
      this.set('value',false);
  }
}

mix( SomeClass, ObservableMixin );

然后使用这个类的代码如下:

const someClass = new SomeClass();
someClass.on( 'change:value', ( evt, propertyName, newValue, oldValue ) => {
     console.log(
          `#${ propertyName } has changed from "${ oldValue }" to "${ newValue }"`
     );
 } );
 someClass.value = true;

打印出来的日志信息如下:

可以知道SomeClass对象的value属性从false变成了true,因此我们自己创建了一个自定义可观测对象。

 

可观测对象在UI中的使用

我们首先定义一个Button

import {View} from 'ckeditor5/src/ui';
export default class Button extends View {
    constructor(){
        super();
        this.type = 'button';


        const bind = this.bindTemplate;


        // this.label is observable but undefined.
        this.set( 'label' );


        // this.isOn is observable and false.
        this.set( 'isOn', false );


        // this.isEnabled is observable and true.
        this.set( 'isEnabled', true );
    }
}

然后使用这个Button

const view = new Button();

view.on( 'change:label', ( evt, propertyName, newValue, oldValue ) => {
    console.log(
        `#${ propertyName } has changed from "${ oldValue }" to "${ newValue }"`
    );
} )

view.label = 'Hello world!'; // -> #label has changed from "undefined" to "Hello world!"
view.label = 'Bold'; // -> #label has changed from "Hello world!" to "Bold"

view.type = 'submit';

从日志信息可以看出,button的属性label是可观测的,而type属性是不可观测的。

小知识:这里每次调用set方法来设置可观测属性是比较麻烦的,CK5提供了一下方法来简化使用:

this.set( {
   label: undefined,
   isOn: false,
   isEnabled: true
} );

 

版权声明:著作权归作者所有。

相关推荐

CKEditor5正确添加插件的方法

CKEditor5添加插件错误ckeditor-duplicated-modules本来想在CKEditor 5的ckeditor5-build-classic添加一个Code Block插件,按官方文档,先安装@ckeditor/ckeditor5-code-blocknpm install --save @ckeditor/ckeditor5-code-block然后再代码中引入使用:impo

理解RxJava里Observables的相关类型

Observable — Operator — ObserverObservable,可观察者,它就好像扬声器一样,做一些处理后发射出一些值。Operator,操作符,它就像翻译员那样将数据从一种形式翻译/修改为另一种形式。Observer,观察者,它获得那些由可观察者发射出来的或者有操作符转译的值。它们的关系如图: RxJava可观察类型在RxJava的可观察类型如下