Kaynağa Gözat

Merge stable into master

CKEditor Bot 5 yıl önce
ebeveyn
işleme
3503c98498

+ 11 - 0
packages/ckeditor5-utils/docs/framework/guides/deep-dive/observables.md

@@ -198,6 +198,17 @@ button.bind( 'isOn' ).to( command, 'value' );
 
 The property has been "renamed" in the binding and from now on, whenever `command.value` changes, the value of `button.isOn` will reflect it.
 
+#### Processing a property value
+
+Another use case is processing the bound property value, for instance, when a button should be disabled only if certain conditions are met. Passing a callback as the third parameter allows implementing a custom logic.
+
+In the example below, the `isEnabled` property will be set to `true` only when `command.value` equals `'heading1`.
+
+```js
+const command = editor.commands.get( 'heading' );
+button.bind( 'isOn' ).to( command, 'value', value => value === 'heading1' );
+```
+
 ### Binding multiple properties
 
 It is possible to bind more that one property at a time to simplify the code:

+ 4 - 0
packages/ckeditor5-utils/src/observablemixin.js

@@ -786,6 +786,10 @@ function attachBindToListeners( observable, toBindings ) {
  *		button.bind( 'isEnabled' ).to( command, 'isEnabled', ui, 'isVisible',
  *			( isCommandEnabled, isUIVisible ) => isCommandEnabled && isUIVisible );
  *
+ * Using a custom callback allows processing the value before passing it to the target property:
+ *
+ *		button.bind( 'isEnabled' ).to( command, 'value', value => value === 'heading1' );
+ *
  * It is also possible to bind to the same property in an array of observables.
  * To bind a `button` to multiple commands (also `Observables`) so that each and every one of them
  * must be enabled for the button to become enabled, use the following code: