BindChain

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 ] : ( value: TObservable[ TAttribute ], node: Node ) => ( true | FalsyValue )

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

Returns

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 : ( value: TObservable[ TAttribute ], node: Node ) => TemplateSimpleValue

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

Returns

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.

Parameters

eventNameOrCallback : string | ( domEvent: Event ) => void

A DOM event name or an event callback.

Returns

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.

Type parameters

TAttribute : extends string

Parameters

attribute : TAttribute

An attribute name of Observable.

Returns

object