TemplateDefinition (ui)

A definition of the 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:

• TemplateValueSchema to learn about HTML element attributes,
• 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: TemplateValueSchema,
		id: TemplateValueSchema,
		style: TemplateValueSchema

		// ...
	},
	on: {
		'click': TemplateListenerSchema

		// Document.querySelector format is also accepted.
		'keyup@a.some-class': TemplateListenerSchema

		// ...
	}
} );

A View, another Template or a native DOM node can also become a child of a template. When a view is passed, its 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
	]
} );

An entire ViewCollection can be used as a child in the definition:

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

new Template( {
	tag: 'p',

	children: collection
} );