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>

Example - use a function in a template

<div id="example"></div>
<script id="javascriptTemplate" type="text/x-kendo-template">
    <ul>
    # for (var i = 0; i < data.length; i++) { #
        <li>#= myCustomFunction(data[i]) #</li>
    # } #
    </ul>
</script>
<script type="text/javascript">
    // Use a custom function inside the template and define it in the global JavaScript scope.
    function myCustomFunction (str) {
        return str.replace(".", " ");
    }
    // Get the external template definition by using a jQuery selector.
    var template = kendo.template($("#javascriptTemplate").html());
    // Create some dummy data.
    var data = ["Todd.Holland", "Steve.Anglin", "Burke.Ballmer"];
    var result = template(data); //Execute the template
    $("#example").html(result); //Append the result
</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>"