Interface BindChain<TObservable>

Binds an module:utils/observablemixin~Observable observable to an HTML element attribute or a text node textContent so it remains in sync with the observable attribute as it changes.

Unlike module:ui/template~BindChain#to, it controls the presence of the attribute or textContent depending on the "falseness" of an module:utils/observablemixin~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();
Copy

Learn more about using if() in the module:ui/template~TemplateValueSchema.

Binds an module:utils/observablemixin~Observable 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();
Copy

Learn more about using to() in the module:ui/template~TemplateValueSchema and module:ui/template~TemplateListenerSchema.

Binds an module:utils/observablemixin~Observable 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();
Copy

Learn more about using to() in the module:ui/template~TemplateValueSchema and module:ui/template~TemplateListenerSchema.

Binds an module:utils/observablemixin~Observable 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();
Copy

Learn more about using to() in the module:ui/template~TemplateValueSchema and module:ui/template~TemplateListenerSchema.