Type Alias TemplateDefinition

A definition of the module:ui/template~Template. It describes what kind of node a template will render (HTML element or text), attributes of an element, DOM event listeners and children.

Also see:

• module:ui/template~TemplateValueSchema to learn about HTML element attributes,
• module:ui/template~TemplateListenerSchema to learn about DOM event listeners.

A sample definition on an HTML element can look like this:

new Template( {
	tag: 'p',
	children: [
		{
			tag: 'span',
			attributes: { ... },
			children: [ ... ],
		},
		{
			text: 'static–text'
		},
		'also-static–text',
	],
	attributes: {
		class: {@link module:ui/template~TemplateValueSchema},
		id: {@link module:ui/template~TemplateValueSchema},
		style: {@link module:ui/template~TemplateValueSchema}

		// ...
	},
	on: {
		'click': {@link module:ui/template~TemplateListenerSchema}

		// Document.querySelector format is also accepted.
		'keyup@a.some-class': {@link module:ui/template~TemplateListenerSchema}

		// ...
	}
} );
Copy

A module:ui/view~View, another module:ui/template~Template or a native DOM node can also become a child of a template. When a view is passed, its module:ui/view~View#element is used:

const view = new SomeView();
const childTemplate = new Template( { ... } );
const childNode = document.createElement( 'b' );

new Template( {
	tag: 'p',

	children: [
		// view#element will be added as a child of this <p>.
		view,

		// The output of childTemplate.render() will be added here.
		childTemplate,

		// Native DOM nodes are included directly in the rendered output.
		childNode
	]
} );
Copy

An entire module:ui/viewcollection~ViewCollection can be used as a child in the definition:

const collection = new ViewCollection();
collection.add( someView );

new Template( {
	tag: 'p',

	children: collection
} );
Copy