敲碎时间,铸造不朽的个人专栏
上一篇

CKEditor5 Observable——属性绑定

广告
选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。
大纲

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

属性绑定

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

首先,我们假定有两个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);

从打印出来的日志可以看出,这种绑定是单向的,只有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对象。

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

X

欢迎加群学习交流

联系我们