Edit this page

up.fragment up:template:clone
DOM event

This event is emitted before a template is cloned.

Templates

Integrating template engines

Listeners can use this event to integrate template engines by following these steps:

  • Listen to the up:template:clone event on selected <template> or <script> elements.
  • Process the given template (event.target) and data (event.data).
  • Set event.nodes to a list of Node objects representing the template results.

When no listener sets event.nodes, Unpoly will simply parse the template's inner HTML. Any variables in event.data will be made available for post-processing in a compiler.

Example: Integrating Mustache.js

We want to integrate Mustache to enable templates like this:

<script id="greeter-template" type="text/mustache"> <!-- mark: text/mustache -->
  <div id="greeter">
    Hello, {{name}}!
  </div>
</script>

An event handler for an integration would look like this:

up.on('up:template:clone', '[type="text/mustache"]', function(event) {
  const template = event.target.innerHTML
  const result = Mustache.render(template, event.data)
  event.nodes = up.element.createNodesFromHTML(result)
})

Also see documentation for up.element.createNodesFromHTML().


Event properties

event.target
required

The template element being cloned.

event.data
required

Any template variables that should be used when cloning.

event.nodes
required

A list of element and text nodes representing the cloned template result.

The value is null initially and must be set by a listener. When no listener sets event.nodes, Unpoly will parse the template's inner HTML.