Speed up your HTML rendering with Kendo UI Templates
Templates offer way of generating html chunks (especially repeatable) by binding to a data array or a datasource. There are multiple templating engines available on web (including jquery templates beta), however this document demonstrates the one provided by Kendo.
To begin with you’ll obviously need to reference both jquery.min.js and kendo.web.min.js
1. Syntax:
JavaScript blocks are denoted by a ‘#’ on either side.
# for (var i= 0; i < data.length; i++) {#
//some code here
# } #
Template substitution values in the HTML are denoted by a ‘#=’ and the front and a closing ‘#’
#= item.text #
2. Creating a New Template:
You may want to create a template.kendo.js file so all your templates reside at one place and scoped to the ‘templates’ namespace. Another advantage of keeping the templates in its own separate file is browser caching speeds up the rendering.
Here’s an example of how to create a new template:
//Namespacing templates
var templates = {
tweet: kendo.template(
'<a class="tweet" href="https://twitter.com/\\#!/#= from_user #/status/#= id_str #" target="_blank">'+
'#= text #<br/>' +
'<label class="weak">#= from_user # |' +
'#= kendo.toString(new Date(Date.parse(created_at)), "dd MMM HH:mm") #</label>' +
'</a>'
)
};
3. Using a Template:
You can either use these templates like templateName(data), or use kendo.render(templateName, data) for the dynamic/repeated data:
var mySingleObjectData = {
text : "This is the text of the tweet",
from_user : "chaudharyp"
};
$("#some-div").html(templates.tweet(mySingleObjectData));
var myRepeatedData = [
{text : "This is my text", from_user : "pc"},
{text : "This is my text", from_user : "brad"},
{text : "This is my text", from_user : "tom"},
{text : "This is my text", from_user : "bradley"}
];
$("#some-div").html(kendo.render(templates.tweets, myRepeatedData));
4. Check out the live demo:
For further reference, visit Kendo UI Templates demo here.
Subscribe to this blog
