Type Alias TemplateValueSchema

Describes a value of an HTML element attribute or textContent. It allows combining multiple data sources like static values and module:utils/observablemixin~Observable attributes.

Also see:

• module:ui/template~TemplateDefinition to learn where to use it,
• module:ui/template~Template.bind to learn how to configure module:utils/observablemixin~Observable attribute bindings,
• module:ui/template~Template#render to learn how to render a template,
• module:ui/template~BindChain#to to() and module:ui/template~BindChain#if if() methods to learn more about bindings.

Attribute values can be described in many different ways:

// Bind helper will create bindings to attributes of the observable.
const bind = Template.bind( observable, emitter );

new Template( {
	tag: 'p',
	attributes: {
		// A plain string schema.
		'class': 'static-text',

		// An object schema, binds to the "foo" attribute of the
		// observable and follows its value.
		'class': bind.to( 'foo' ),

		// An array schema, combines the above.
		'class': [
			'static-text',
			bind.to( 'bar', () => { ... } ),

			// Bindings can also be conditional.
			bind.if( 'baz', 'class-when-baz-is-true' )
		],

		// An array schema, with a custom namespace, e.g. useful for creating SVGs.
		'class': {
			ns: 'http://ns.url',
			value: [
				bind.if( 'baz', 'value-when-true' ),
				'static-text'
			]
		},

		// An object schema, specific for styles.
		style: {
			color: 'red',
			'--color': 'red',
			backgroundColor: bind.to( 'qux', () => { ... } )
		}
	}
} );
Copy

Text nodes can also have complex values:

const bind = Template.bind( observable, emitter );

// Will render a "foo" text node.
new Template( {
	text: 'foo'
} );

// Will render a "static text: {observable.foo}" text node.
// The text of the node will be updated as the "foo" attribute changes.
new Template( {
	text: [
		'static text: ',
		bind.to( 'foo', () => { ... } )
	]
} );
Copy