template

Compiles a template to a function that builds HTML. Useful when a template will be used several times. Templates offer way of creating HTML chunks. Options such as HTML encoding and compilation for optimal performance are available.

Example - Basic template

<span id="output"></span>
<script>
var template = kendo.template("Hello, #= firstName # #= lastName #");
var data = { firstName: "John", lastName: "Doe" };
$("#output").html(template(data));
</script>

Example - encode HTML

<span id="output"></span>
<script>
var template = kendo.template("HTML tags are encoded: #: html #");
var data = { html: "<strong>lorem ipsum</strong>" };
$("#output").html(template(data));
</script>

Example - use JavaScript in the template

<span id="output"></span>
<script>
var template = kendo.template("#if (foo) {# foo is true #}#");
var data = { foo: true };
$("#output").html(template(data));
</script>

Example - escape sharp ("#") symbols in an inline template

<span id="output"></span>
<script>
var template = kendo.template("<a href='\\#'>link</a>");
$("#output").html(template({}));
</script>

Example - escape sharp ("#") symbols in a template defined in a script element

<span id="output"></span>
<script type="text/x-kendo-template" id="template">
<a href="\#">link</a>
</script>
<script>
var template = kendo.template($("#template").html());
$("#output").html(template({}));
</script>

ReturnsFunction the compiled template as a JavaScript function. When called this function will return the generated HTML string.

Parameters

template String

The template that will be compiled.

options Object (optional)

Template compilation options.

options.paramName String (default: "data")

The name of the parameter used by the generated function. Useful when useWithBlock is set to false.

Example

var template = kendo.template("<strong>#: d.name #</strong>", { paramName: "d", useWithBlock: false });

options.useWithBlock Boolean (default: true)

Wraps the generated code in a with block. This allows the usage of unqualified fields in the template. Disabling the with block will improve the performance of the template.

Example

var template = kendo.template("<strong>#: data.name #</strong>", { useWithBlock: false }); // Note that "data." is used to qualify the field

/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(template({ name: "John Doe" })); // outputs "<strong>John Doe</strong>"