BindChain
The return value of Template.bind(). It provides to() and if() methods to create the observable attribute and event bindings.
Type parameters
TObservable
Methods
if( attribute, valueIfTrue?, callback? ) → AttributeBindingmodule:ui/template~BindChain#ifBinds an observable to an HTML element attribute or a text node
textContentso it remains in sync with the observable attribute as it changes.Unlike
to, it controls the presence of the attribute ortextContentdepending on the "falseness" of anObservableattribute.
Copy codeconst 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 theTemplateValueSchema.Type parameters
TAttribute: extends string
Parameters
attribute: TAttributeAn attribute name of
Observableused in the binding.valueIfTrue?: unknownValue set when the
Observableattribute is not undefined/null/false/'' (empty string).callback?: ( value: TObservable[ TAttribute ], node: Node ) => ( true | FalsyValue )Allows for processing of the value. Accepts
Nodeandvalueas arguments.
Returns
to( attribute, callback ) → AttributeBindingmodule:ui/template~BindChain#to:ATTRIBUTE_CALLBACKBinds 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:
Copy codeconst 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 theTemplateValueSchemaandTemplateListenerSchema.Type parameters
TAttribute: extends string
Parameters
attribute: TAttributeAn attribute name of
Observable.callback: ( value: TObservable[ TAttribute ], node: Node ) => TemplateSimpleValueAllows for processing of the value. Accepts
Nodeandvalueas arguments.
Returns
- an HTML element attribute or a text node
to( eventNameOrCallback ) → ListenerBindingmodule:ui/template~BindChain#to:EVENTBinds 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:
Copy codeconst 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 theTemplateValueSchemaandTemplateListenerSchema.Parameters
eventNameOrCallback: string | ( domEvent: Event ) => voidA DOM event name or an event callback.
Returns
- an HTML element attribute or a text node
to( attribute ) → AttributeBinding & ListenerBindingmodule:ui/template~BindChain#to:ATTRIBUTEBinds 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:
Copy codeconst 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 theTemplateValueSchemaandTemplateListenerSchema.Type parameters
TAttribute: extends string
Parameters
attribute: TAttributeAn attribute name of
Observable.
Returns
- an HTML element attribute or a text node