CKEditor Ecosystem Documentation
Search
⚠️ WarningNightly documentation ahead. Switch to the stable editor documentation.
Home/CKEditor 5/API
Interface

BindChain (ui)

@ckeditor/ckeditor5-ui/src/template

interface
See source

The return value of Template.bind(). It provides to() and if() methods to create the observable attribute and event bindings.

Filtering

Methods

  • if( attribute, [ valueIfTrue ], [ callback ] ) → TemplateBinding

    Binds an observable to an HTML element attribute or a text node textContent so it remains in sync with the observable attribute as it changes.

    See source

    Unlike to, it controls the presence of the attribute or textContent depending on the "falseness" of an Observable attribute.

    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.

    Parameters

    attribute : String

    An attribute name of Observable used in the binding.

    [ valueIfTrue ] : String

    Value set when the Observable attribute is not undefined/null/false/'' (empty string).

    [ callback ] : function

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

    Returns

    TemplateBinding

  • to( eventNameOrFunctionOrAttribute, [ callback ] ) → TemplateBinding

    Binds an observable to either:

    See source
    • 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:

    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 and TemplateListenerSchema.

    Parameters

    eventNameOrFunctionOrAttribute : String | function

    An attribute name of Observable or a DOM event name or an event callback.

    [ callback ] : function

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

    Returns

    TemplateBinding