BindChain (ui)

@ckeditor/ckeditor5-ui/src/template

Type parameters

• TObservable

Methods

• if( attribute, [ valueIfTrue ], [ callback ] ) → AttributeBindingmodule:ui/template~BindChain#if

  See source

  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 ) → AttributeBindingmodule:ui/template~BindChain#to:ATTRIBUTE_CALLBACK

  See source

  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 ) → ListenerBindingmodule:ui/template~BindChain#to:EVENT

  See source

  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 ) → objectmodule:ui/template~BindChain#to:ATTRIBUTE

  See source

  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