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.
Delegates selected events to another module:utils/emittermixin~Emitter. For instance:
emitterA.delegate( 'eventX' ).to( emitterB );
emitterA.delegate( 'eventX', 'eventY' ).to( emitterC );
then eventX is delegated (fired by) emitterB and emitterC along with data:
emitterA.fire( 'eventX', data );
and eventY is delegated (fired by) emitterC along with data:
emitterA.fire( 'eventY', data );
Event names that will be delegated to another emitter.
Fires an event, executing all callbacks registered for it.
The first parameter passed to callbacks is an module:utils/eventinfo~EventInfo object,
followed by the optional args provided in the fire() method call.
The type describing the event. See module:utils/emittermixin~BaseEvent.
The name of the event or EventInfo object if event is delegated.
Additional arguments to be passed to the callbacks.
By default the method returns undefined. However, the return value can be changed by listeners
through modification of the module:utils/eventinfo~EventInfo#return evt.return's property (the event info
is the first param of every callback).
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 );
}
Registers a callback function to be executed when an event is fired in a specific (emitter) object.
Events can be grouped in namespaces using :.
When namespaced event is fired, it additionally fires all callbacks for that namespace.
// myEmitter.on( ... ) is a shorthand for myEmitter.listenTo( myEmitter, ... ).
myEmitter.on( 'myGroup', genericCallback );
myEmitter.on( 'myGroup:myEvent', specificCallback );
// genericCallback is fired.
myEmitter.fire( 'myGroup' );
// both genericCallback and specificCallback are fired.
myEmitter.fire( 'myGroup:myEvent' );
// genericCallback is fired even though there are no callbacks for "foo".
myEmitter.fire( 'myGroup:foo' );
An event callback can module:utils/eventinfo~EventInfo#stop stop the event and set the module:utils/eventinfo~EventInfo#return return value of the #fire method.
The type describing the event. See module:utils/emittermixin~BaseEvent.
The object that fires the event.
The name of the event.
The function to be called on event.
Optionaloptions: GetCallbackOptions<TEvent>Additional options.
Stops executing the callback on the given event.
Shorthand for #stopListening this.stopListening( this, event, callback ).
The name of the event.
The function to stop being called.
Registers a callback function to be executed when an event is fired.
Shorthand for #listenTo this.listenTo( this, event, callback, options ) (it makes the emitter
listen on itself).
The type descibing the event. See module:utils/emittermixin~BaseEvent.
The name of the event.
The function to be called on event.
Optionaloptions: GetCallbackOptions<TEvent>Additional options.
Registers a callback function to be executed on the next time the event is fired only. This is similar to calling #on followed by #off in the callback.
The type descibing the event. See module:utils/emittermixin~BaseEvent.
The name of the event.
The function to be called on event.
Optionaloptions: GetCallbackOptions<TEvent>Additional options.
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.
Stops delegating events. It can be used at different levels:
Optionalevent: stringThe name of the event to stop delegating. If omitted, stops it all delegations.
Optionalemitter: Emitter(requires event) The object to stop delegating a particular event to.
If omitted, stops delegation of event to all emitters.
Stops listening for events. It can be used at different levels:
Optionalemitter: EmitterThe object to stop listening to. If omitted, stops it for all objects.
Optionalevent: string(Requires the emitter) The name of the event to stop listening to. If omitted, stops it
for all events from emitter.
Optionalcallback: Function(Requires the event) The function to be removed from the call list for the given
event.
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.