Basic template
Source:
var inlineTemplate = kendo.template("Hello, <#= firstName #> <#= lastName #>");
var inlineData = { firstName: "John", lastName: "Doe" };
$("#inline").html(inlineTemplate(inlineData));
Output:
Template as script element
Source:
<script id="scriptTemplate" type="text/x-kendo-template">
Hello, <#= firstName #> <#= lastName #>
</script>
<script>
var scriptTemplate = kendo.template($("#scriptTemplate").html());
var scriptData = { firstName: "John", lastName: "Doe" };
$("#script").html(scriptTemplate(scriptData));
</script>
Output:
Encoding HTML
Source:
var encodingTemplate = kendo.template("HTML tags are encoded like this - ${ html }");
var encodingData = { html: "<strong>lorem ipsum</strong>" };
$("#encoding").html(encodingTemplate(encodingData));
Output:
Using JavaScript code inside the template definition
Source
<script id="javascriptTemplate" type="text/x-kendo-template">
<ul>
<# for (var i = 0; i < data.length; i++) { #>
<li><#= data[i] #></li>
<# } #>
<ul>
<script>
<script>
var javascriptTemplate = kendo.template($("#javascriptTemplate").html());
var javascriptData = ["First", "Second", "Third"];
$("#javascript").html(javascriptTemplate(javascriptData));
<script>
Output:
Templates offer way of creating html chunks. Options such as html encoding and compilation for optimal performance are available.
Basic template
var inlineTemplate = kendo.template("Hello, <#= firstName #> <#= lastName #>");
var inlineData = { firstName: "John", lastName: "Doe" };
$("#inline").html(inlineTemplate(inlineData));
Output:
Hello, John Doe!Encoding HTML
var encodingTemplate = kendo.template("HTML tags are encoded like this - ${ html }");
var encodingData = { html: "<strong>lorem ipsum</strong>" };
$("#encoding").html(encodingTemplate(encodingData));
Output:
HTML tags are encoded like this - <strong>lorem ipsum</strong>No code