Interface

BindChain (ui)

@ckeditor/ckeditor5-ui/src/template

interface

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

Filtering

Type parameters

Methods

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

    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.

    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.

    Type parameters

    TAttribute : extends string

    Parameters

    attribute : TAttribute

    An attribute name of Observable used in the binding.

    [ valueIfTrue ] : unknown

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

    [ callback ] : ( TObservable[ TAttribute ], Node ) => ( true | FalsyValue )

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

    Returns

    AttributeBinding
  • to( attribute, callback ) → AttributeBinding

    Binds an observable 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:

    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.

    Type parameters

    TAttribute : extends string

    Parameters

    attribute : TAttribute

    An attribute name of Observable.

    callback : ( TObservable[ TAttribute ], Node ) => TemplateSimpleValue

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

    Returns

    AttributeBinding
  • to( eventNameOrCallback ) → ListenerBinding

    Binds an observable 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:

    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

    eventNameOrCallback : string | ( Event ) => void

    A DOM event name or an event callback.

    Returns

    ListenerBinding
  • to( attribute ) → object

    Binds an observable 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:

    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.

    Type parameters

    TAttribute : extends string

    Parameters

    attribute : TAttribute

    An attribute name of Observable.

    Returns

    object