CKEditor5 Observable——属性绑定

时间：2022-06-01 12:42:13

前面我们知道了，在CK5中怎么样将一个对象设置成Observable以及Observable在UI中如何使用？

CKEditor5 Observable——属性绑定

属性绑定

今天我们来看看如何进行可观测对象的属性绑定和重命名。

首先，我们假定有两个Observable对象，所谓绑定就是将一个对象的可观测状态绑定到另一个可观测对象，如下所示：

const button = new Button();
const command = editor.commands.get( 'bold' );//1

button.bind( 'isEnabled' ).to( command );//2

分析以上代码,我们知道：

  1. 1处的command是Observable对象，2处的button也是Observable对象。
     
  2. button将自己的isEnable这个可观测属性绑定到了command上。button.isEnabled===command.isEnabled
     
  3. 当command的isEnabled属性改变时，button的isEnabled属性也会改变。
     
  4. 如果button的class属性也是绑定到isEnabled，这时，button的dom元素也会更新，因为class属性也会改变。

通过以上四个步骤，就达到了通过command刷新button的目的。

小提示：将一个对象的属性设置成可观测属性，set()方法是唯一的方法。

 

重命名

仔细观察上面的代码2处，其实to方法还可以写成如下：

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

所以to方法有第二个参数。它有什么作用呢？请看如下代码：

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

这个时候，command的value属性改变的时候，button的isOn属性同样会反映出这种变化。

注意，这里是to后面的Observable属性改变然后bind方法前面的Observable属性反应这种变化。这里提出一个问题，如果bind前面的Observable属性改变，to后面的Observable属性会发生变化吗？我们试试：

 

定义两个Observable对象

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

 

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

export default class AnyClass {
  constructor(){
      this.set('isOn');
  }
}

mix( AnyClass, ObservableMixin );

SomeClass类定义了一个可观测对象value，而AnyClass类定义了一个可观测对象isOn;

下面是验证这种绑定是单向的还是双向的：

const someClass = new SomeClass();
const anyClass = new AnyClass();

someClass.bind('value').to(anyClass,'isOn');

anyClass.isOn = true;
console.log('someClass.value',someClass.value);

//反过来：
someClass.value = false;
console.log('anyClass.isOn',anyClass.isOn);

anyClass.isOn = false;
console.log('someClass.value',someClass.value);

CKEditor5 Observable——属性绑定

从打印出来的日志可以看出，这种绑定是单向的，只有to后面的Observable对象的属性变化时，bind前的Observable对象会反应这种变化。而相反的情况bind前的Observable对象发生改变时，to后面的Observable对象不会反应这种变化。

 

处理属性值

某些情况下，还可以处理属性值：

const command = editor.commands.get( 'heading' );
button.bind( 'isOn' ).to( command, 'value', value => value === 'heading1' );

上面的例子意思就是，当command的value是不是heading1时，那么button的isOn属性就是false，按钮的dom也会有相应的反映。

 

下一节我们介绍绑定多个属性以及绑定多个Observable对象。

标签：

相关文章