---
name: "up:template:clone"
area: "API"
kind: "DOM event"
parent: "up.fragment module"
url: "https://unpoly.com/api/up:template:clone"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.fragment module](https://unpoly.com/api/up.fragment.md)</nav>

# up:template:clone

This event is emitted before a [template is cloned](https://unpoly.com/learn/templates.md).

<nav aria-label="Guides">

- [Learn: Templates](https://unpoly.com/learn/templates.md)

</nav>

<nav aria-label="Contents">

#### Contents

- [Integrating template engines](#integrating-template-engines)
- [Example: Integrating Mustache.js](#example-integrating-mustachejs)
- [Event properties](#properties)

</nav>

## Integrating template engines {#integrating-template-engines}

Listeners can use this event to [integrate template engines](https://unpoly.com/learn/templates.md#dynamic) 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](https://unpoly.com/api/List.md) of [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/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](https://unpoly.com/learn/templates.md#compiler-postprocessing).

## Example: Integrating Mustache.js {#example-integrating-mustachejs}

We want to integrate [Mustache](https://github.com/janl/mustache.js) to enable templates like this:

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

An event handler for a Mustache integration would look like this:

```js
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()`](https://unpoly.com/api/up.element.createNodesFromHTML.md).

---

## Event properties {#properties}

### event.target {#event.target}

(required)

The template element being cloned.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)

### event.data {#event.data}

(required)

Any [template variables](https://unpoly.com/learn/templates.md#dynamic) that should be used when cloning.

Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

### event.nodes {#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.

Type: null | [List](https://unpoly.com/api/List.md)<[Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)>