Creates an instance of the ~Template class.
The definition of the template.
OptionalattributesThe attributes of the template, e.g. { id: [ 'ck-id' ] }, corresponding with
the attributes of an HTML element.
Note: This property only makes sense when #tag is defined.
OptionalchildrenThe children of the template. They can be either:
Note: This property only makes sense when #tag is defined.
OptionaleventThe DOM event listeners of the template.
OptionalnsOptionaltagThe tag (tagName) of this template, e.g. div. It also indicates that the template
renders to an HTML element.
OptionaltextThe text of the template. It also indicates that the template renders to a DOM text node.
Applies the template to an existing DOM Node, either HTML element or text.
Note: No new DOM nodes will be created. Applying extends:
module:ui/template~TemplateDefinition attributes,
module:ui/template~TemplateDefinition event listeners, and
textContent of module:ui/template~TemplateDefinition children only.
Note: Existing class and style attributes are extended when a template
is applied to an HTML element, while other attributes and textContent are overridden.
Note: The process of applying a template can be easily reverted using the module:ui/template~Template#revert method.
const element = document.createElement( 'div' );
const observable = new Model( { divClass: 'my-div' } );
const emitter = Object.create( EmitterMixin );
const bind = Template.bind( observable, emitter );
new Template( {
attributes: {
id: 'first-div',
class: bind.to( 'divClass' )
},
on: {
click: bind( 'elementClicked' ) // Will be fired by the observable.
},
children: [
'Div text.'
]
} ).apply( element );
console.log( element.outerHTML ); // -> '<div id="first-div" class="my-div"></div>'
Root node for the template to apply.
Returns an iterator which traverses the template in search of module:ui/view~View instances and returns them one by one.
const viewFoo = new View();
const viewBar = new View();
const viewBaz = new View();
const template = new Template( {
tag: 'div',
children: [
viewFoo,
{
tag: 'div',
children: [
viewBar
]
},
viewBaz
]
} );
// Logs: viewFoo, viewBar, viewBaz
for ( const view of template.getViews() ) {
console.log( view );
}
Renders a DOM Node (an HTML element or text) out of the template.
const domNode = new Template( { ... } ).render();
See: #apply.
Reverts a template module:ui/template~Template#apply applied to a DOM node.
The root node for the template to revert. In most of the cases, it is the same node used by module:ui/template~Template#apply.
StaticbindAn entry point to the interface which binds DOM nodes to module:utils/observablemixin~Observable observables. There are two types of bindings:
textContent synchronized with attributes of an
module:utils/observablemixin~Observable. Learn more about module:ui/template~BindChain#to
and module:ui/template~BindChain#if.const bind = Template.bind( observable, emitter );
new Template( {
attributes: {
// Binds the element "class" attribute to observable#classAttribute.
class: bind.to( 'classAttribute' )
}
} ).render();
const bind = Template.bind( observable, emitter );
new Template( {
on: {
// Will be fired by the observable.
click: bind( 'elementClicked' )
}
} ).render();
Also see module:ui/view~View#bindTemplate.
An observable which provides boundable attributes.
An emitter that listens to observable attribute changes or DOM Events (depending on the kind of the binding). Usually, a module:ui/view~View instance.
StaticextendExtends an existing module:ui/template~Template instance with some additional content from another module:ui/template~TemplateDefinition.
const bind = Template.bind( observable, emitter );
const template = new Template( {
tag: 'p',
attributes: {
class: 'a',
data-x: bind.to( 'foo' )
},
children: [
{
tag: 'span',
attributes: {
class: 'b'
},
children: [
'Span'
]
}
]
} );
// Instance-level extension.
Template.extend( template, {
attributes: {
class: 'b',
data-x: bind.to( 'bar' )
},
children: [
{
attributes: {
class: 'c'
}
}
]
} );
// Child extension.
Template.extend( template.children[ 0 ], {
attributes: {
class: 'd'
}
} );
the outerHTML of template.render() is:
<p class="a b" data-x="{ observable.foo } { observable.bar }">
<span class="b c d">Span</span>
</p>
An existing template instance to be extended.
Additional definition to be applied to a template.
A basic Template class. It renders a DOM HTML element or text from a module:ui/template~TemplateDefinition definition and supports element attributes, children, bindings to module:utils/observablemixin~Observable observables and DOM event propagation.
A simple template can look like this:
and it will render the following HTML element:
Additionally, the
observablewill always fireclickedupon clicking<p>in the DOM.See module:ui/template~TemplateDefinition to know more about templates and complex template definitions.