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().