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对象。

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

相关推荐

C#给ExpandoObject动态添加属性

C#给ExpandoObject动态添加对象:方法一:dynamic x = new ExpandoObject();x.NewProp = string.Empty;方法二:var x = new ExpandoObject() as IDictionary<string, Object>;x.Add("NewProp", string.Empty);

C#对List的元素按属性排序

C#对List元素排序有几种方法。方法一、使用LinqList<User> sortedList = list.OrderBy(o=>o.ID).ToList();如果按降序排序,可以使用OrderByDescending方法:List<User> sortedList = list.OrderByDescending(o=>o.ID).ToList();方法二

禁止input文本框输入实现属性

今天想总结几个很有用的html标签,开发中经常用到,不熟悉的人可能还真不太清楚,分别是: 复制代码代码如下:readonly、disabled、autocomplete readonly表示此域的值不可修改,仅可与 type="text" 配合使用,可复制,可选择,可以接收焦点,后台会接收到传值. 复制代码代码如下:<input type="text" name="www.xxx" read

Vue.js 2属性值绑定v-bind

语法:v-bind指令用于动态绑定值给属性,它的值可以是数组,对象以及表达式基本使用<!-- 绑定一个属性 --><img v-bind:src="imageSrc"><!-- 缩写 --><img :src="imageSrc"><!-- 内联字符串拼接 --><img :src="'/path/to/images/' + fil

JavaScript:给动态元素绑定事件

JavaScript给动态添加的元素绑定事件有几种方式:方法一:jQuery使用jQuery.fn.on可以很简单为动态元素绑定事件:$(staticAncestors).on(eventName, dynamicChild, function() {}); staticAncestors:静态的祖先元素选择器eventName:事件名,如click等dynamicC

TypeScript:接口(interface)属性的定义

  在TypeScript里,接口扮演了一个定义数据结构的角色,它在TypeScript的类型检查中起到很重要的作用。基本用法匿名定义sayHello(person: {name:string}) { console.log(person.name + ", 您好!"); } 这是一个很简单的例子,它使用匿