CKEditor5 Observable——绑定多个对象或属性

上一节我们学习了如何绑定属性,今天我们继续学习绑定多个属性或者多个Observable对象。

 

绑定多个属性

如何绑定多个属性,下面我们用代码来说明:

const button = new Button();
const command = editor.commands.get( 'bold' );
button.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );

其实呢?以上代码就是如下代码的简化版:

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

 

绑定多个Observable对象

绑定可以包含多个Observable对象,在自定义回调函数中组合多个属性。代码如下所示:

const button = new Button();
const command = editor.commands.get( 'bold' );
const editingDocument = editor.editing.view.document;
button.bind( 'isEnabled' ).to( command, 'isEnabled', editingDocument, 'isFocused',
   ( isCommandEnabled, isDocumentFocused ) => isCommandEnabled && isDocumentFocused );

如上所示,button的属性isEnabled被绑定到了command和editingDocument对象的对应属性上,自定义回调函数控制着isEnabled的逻辑值,当command的isEnabled为true并且文档获得焦点的时候,按钮是可用的。

这里有特殊情况是绑定到一个数组Observable。代码如下:

const button = new Button();
const commands =  [ commandA, commandB, commandC ];
button.bind( 'isEnabled' ).toMany( commands, 'isEnabled', ( isAEnabled, isBEnabled, isCEnabled ) => {
   return isAEnabled && isBEnabled && isCEnabled;
} );
//以上可以简写为
button.bind( 'isEnabled' ).toMany( commands, 'isEnabled', ( ...areEnabled ) => {
    return areEnabled.every( isCommandEnabled => isCommandEnabled );
} );

 

释放绑定

同事件类似,有绑定就有释放绑定,下面说说怎么释放绑定。

释放特定属性绑定

const button = new Button();
const command = editor.commands.get( 'bold' );
button.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
// ...
// From now on, button#isEnabled is no longer bound to the command.
button.unbind( 'isEnabled' );

释放全部绑定

const button = new Button();
const command = editor.commands.get( 'bold' );
button.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
// ...
// Both #isEnabled and #isOn properties are independent back again.
// They will retain the last values determined by the bindings, though.
button.unbind();

 

下一节我们介绍Observable的装饰对象方法,decorate(),它提供了一种不改变原始对象的代码却能够增强代码功能的方式。

 

 

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

相关推荐

JavaScript定义使用类和对象Object的方法

在JavaScript里定义Object有三种方式:对象常量,使用object的构造器定义,以及使用class定义。方式一、对象常量使用对象常量的方式是很直接的,直接在定义对象的属性及方法即可,如下:const bird = { name: 'Joe', numWings: 2, numLegs: 2, numHeads: 1, fly(){}, chirp(){}, eat(){}

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

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

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

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

Android使用Kotlin新特性Parcelize序列化对象

Android对对象序列化主要有两种方式:Serializable和Parcelable。Serializable实际是使用Java的放射机制对对象做序列化和反序列化,其性能远低于使用Parcelable。但是使用Java写的Parcelable有点繁琐,需要我们实现Parcelable接口,手写很多模板代码。Java版Parcelable示例public class User

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

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