BindChain (ui)

@ckeditor/ckeditor5-ui/src/template

Methods

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

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

  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