# BindChain

interface

The return value of [`Template.bind()`](module_ui_template-Template.md#static-function-bind). It provides `to()` and `if()` methods to create the [observable](module_utils_observablemixin-Observable.md) attribute and event bindings.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/template.ts#L1864)

<a id="type-parameters">

## Type parameters

### `TObservable`

<a id="methods">

## Methods

<a id="function-if">

### `if( attribute, valueIfTrue?, callback? ) → AttributeBinding`

Binds an [observable](module_utils_observablemixin-Observable.md) to an HTML element attribute or a text node `textContent` so it remains in sync with the observable attribute as it changes.

Unlike [`to`](#function-to:ATTRIBUTE), it controls the presence of the attribute or `textContent` depending on the "falseness" of an [`Observable`](module_utils_observablemixin-Observable.md) attribute.

```typescript
const bind = Template.bind( observable, emitter );

new Template( {
	tag: 'input',
	attributes: {
		// <input checked> when `observable#a` is not undefined/null/false/''
		// <input> when `observable#a` is undefined/null/false
		checked: bind.if( 'a' )
	},
	children: [
		{
			// <input>"b-is-not-set"</input> when `observable#b` is undefined/null/false/''
			// <input></input> when `observable#b` is not "falsy"
			text: bind.if( 'b', 'b-is-not-set', ( value, node ) => !value )
		}
	]
} ).render();
```

Learn more about using `if()` in the [`TemplateValueSchema`](module_ui_template-TemplateValueSchema.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/template.ts#L2044)

#### Type parameters

* `TAttribute: extends string`

#### Parameters

* `attribute: TAttribute`

  An attribute name of [`Observable`](module_utils_observablemixin-Observable.md) used in the binding.

* `valueIfTrue?: unknown`

  Value set when the [`Observable`](module_utils_observablemixin-Observable.md) attribute is not undefined/null/false/'' (empty string).

* `callback?: ( value: TObservable[ TAttribute ], node: Node ) => ( true | FalsyValue )`

  Allows for processing of the value. Accepts `Node` and `value` as arguments.

#### Returns

* `AttributeBinding`

<a id="function-to:ATTRIBUTE_CALLBACK">

### `to( attribute, callback ) → AttributeBinding`

Binds an [observable](module_utils_observablemixin-Observable.md) to either:

* an HTML element attribute or a text node `textContent`, so it remains in sync with the observable attribute as it changes,
* or an HTML element DOM event, so the DOM events are propagated through an observable.

Some common use cases of `to()` bindings are presented below:

```typescript
const bind = Template.bind( observable, emitter );

new Template( {
	tag: 'p',
	attributes: {
		// class="..." attribute gets bound to `observable#a`
		class: bind.to( 'a' )
	},
	children: [
		// <p>...</p> gets bound to observable#b; always `toUpperCase()`.
		{
			text: bind.to( 'b', ( value, node ) => value.toUpperCase() )
		}
	],
	on: {
		click: [
			// An observable will fire "clicked" upon "click" in the DOM.
			bind.to( 'clicked' ),

			// A custom callback will be executed upon "click" in the DOM.
			bind.to( () => {
				...
			} )
		]
	}
} ).render();
```

Learn more about using `to()` in the [`TemplateValueSchema`](module_ui_template-TemplateValueSchema.md) and [`TemplateListenerSchema`](module_ui_template-TemplateListenerSchema.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/template.ts#L1959)

#### Type parameters

* `TAttribute: extends string`

#### Parameters

* `attribute: TAttribute`

  An attribute name of [`Observable`](module_utils_observablemixin-Observable.md).

* `callback: ( value: TObservable[ TAttribute ], node: Node ) => TemplateSimpleValue`

  Allows for processing of the value. Accepts `Node` and `value` as arguments.

#### Returns

* `AttributeBinding`

<a id="function-to:EVENT">

### `to( eventNameOrCallback ) → ListenerBinding`

Binds an [observable](module_utils_observablemixin-Observable.md) to either:

* an HTML element attribute or a text node `textContent`, so it remains in sync with the observable attribute as it changes,
* or an HTML element DOM event, so the DOM events are propagated through an observable.

Some common use cases of `to()` bindings are presented below:

```typescript
const bind = Template.bind( observable, emitter );

new Template( {
	tag: 'p',
	attributes: {
		// class="..." attribute gets bound to `observable#a`
		class: bind.to( 'a' )
	},
	children: [
		// <p>...</p> gets bound to observable#b; always `toUpperCase()`.
		{
			text: bind.to( 'b', ( value, node ) => value.toUpperCase() )
		}
	],
	on: {
		click: [
			// An observable will fire "clicked" upon "click" in the DOM.
			bind.to( 'clicked' ),

			// A custom callback will be executed upon "click" in the DOM.
			bind.to( () => {
				...
			} )
		]
	}
} ).render();
```

Learn more about using `to()` in the [`TemplateValueSchema`](module_ui_template-TemplateValueSchema.md) and [`TemplateListenerSchema`](module_ui_template-TemplateListenerSchema.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/template.ts#L2008)

#### Parameters

* `eventNameOrCallback: string | ( domEvent: Event ) => void`

  A DOM event name or an event callback.

#### Returns

* `ListenerBinding`

<a id="function-to:ATTRIBUTE">

### `to( attribute ) → AttributeBinding & ListenerBinding`

Binds an [observable](module_utils_observablemixin-Observable.md) to either:

* an HTML element attribute or a text node `textContent`, so it remains in sync with the observable attribute as it changes,
* or an HTML element DOM event, so the DOM events are propagated through an observable.

Some common use cases of `to()` bindings are presented below:

```typescript
const bind = Template.bind( observable, emitter );

new Template( {
	tag: 'p',
	attributes: {
		// class="..." attribute gets bound to `observable#a`
		class: bind.to( 'a' )
	},
	children: [
		// <p>...</p> gets bound to observable#b; always `toUpperCase()`.
		{
			text: bind.to( 'b', ( value, node ) => value.toUpperCase() )
		}
	],
	on: {
		click: [
			// An observable will fire "clicked" upon "click" in the DOM.
			bind.to( 'clicked' ),

			// A custom callback will be executed upon "click" in the DOM.
			bind.to( () => {
				...
			} )
		]
	}
} ).render();
```

Learn more about using `to()` in the [`TemplateValueSchema`](module_ui_template-TemplateValueSchema.md) and [`TemplateListenerSchema`](module_ui_template-TemplateListenerSchema.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/template.ts#L1910)

#### Type parameters

* `TAttribute: extends string`

#### Parameters

* `attribute: TAttribute`

  An attribute name of [`Observable`](module_utils_observablemixin-Observable.md).

#### Returns

* `AttributeBinding & ListenerBinding`

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)