templating - Eric Feminella

Integrating Handlebars Templates in Kendo UI

I have been evaluating Kendo UI recently for its rich set of Widget APIs and general HTML5 UI Framework capabilities. One of the first things I wanted to see was how easily Kendo UI Widgets could be integrated with different Templating Engines, Handlebars in particular.

By default, Kendo UI provides out of the box templating support via Kendo UI Templates as well as support for jQuery Templates. While both solutions are quite good, I generally prefer logic-less Templating, with Handlebars being my preferred Template Engine of choice.

Fortunately, as it turns out, integration with Handlebars is actually quite simple. In fact, integration with basically any Template Engine is rather straight forward and can be implemented transparently.

Integration

In order to use a Template Engine which is not supported by default, one just needs to implement a Widget’s specific template property as a method which returns the resulting markup from a compiled template. This is easiest to understand by viewing examples in the context of both default templating as well as specific template integration.

First, templates in Kendo UI are typically implemented as follows (with this particular example being in the context of the rowTemplate of the Kendo UI Grid):

<tr>

<td>${ released }</td>

</tr>

</script>

$(function() {

// Compile a typical Handlebars template...

var template = Handlebars.compile($('#row-tpl').html());

$('#grid').kendoGrid({

dataSource: {

data: [{

'name': 'iPhone',

'released': 'June 29, 2007'

}, {

'name': 'iPhone 3G',

'released': 'July 11, 2008'

}, {

'name': 'iPhone 3GS',

'released': 'June 19, 2009'

}, {

'name': 'iPhone 4',

'released': 'June 24, 2010'

}, {

'name': 'iPhone 4S',

'released': 'October 14, 2011'

}]

// Kendo UI Widgets directly assign a compiled template

// to the Widget's template property (in this example, we're

// using the kendoGrid widget's template property 'rowTemplate')

rowTemplate: kendo.template($("#row-tpl").html()),

});

</script>

Note that in the above example the compiled template is directly assigned to the rowTemplate property.

Now, to integrate a Template Engine of your choosing (in this example, Handlebars), assign a function to the rowTemplate property. The function assigned accepts a data object (which represents the data of a row) and, simply invoke the complied template with the data object, returning the result as follows:

<tr>

<td>{{released}}</td>

</tr>

</script>

$(function() {

// Compile a typical Handlebars template...

var template = Handlebars.compile($('#row-tpl').html());

$('#grid').kendoGrid({

dataSource: {

data: [{

'name': 'iPhone',

'released': 'June 29, 2007'

}, {

'name': 'iPhone 3G',

'released': 'July 11, 2008'

}, {

'name': 'iPhone 3GS',

'released': 'June 19, 2009'

}, {

'name': 'iPhone 4',

'released': 'June 24, 2010'

}, {

'name': 'iPhone 4S',

'released': 'October 14, 2011'

}]

// To integrate a specific Template Engine, simply have the

// Widget's template property reference a function which in

// turn returns the compiled template against the data argument.

rowTemplate: function(data) {

return template(data);

}

});

</script>

And thats all there is to it. You can try the above example implementation here.

Comments Off

External Templates in jQote2

The jQote2 API Reference provides plenty of useful examples which are sure to help users get up and running quickly. I found it a bit unclear, though, as to how templates could be loaded externally as, in the reference examples, templates are defined within the containing page. For the sake of simplicity this approach certainly makes sense in the context of examples. However, in practice, templates would ideally be loaded externally.

While jQote2 provides a perfect API for templating, it does not provide a method specifically for loading external templates; this is likely due to the fact that loading external templates could easily be accomplished natively in jQuery. However, since this is a rather common development use case, having such a facility available would be quite useful.

After reviewing the comments I came across a nice example from aefxx (the author of jQote2) which demonstrated a typical approach to loading external templates which was simular to what I had been implementing myself.

And so, I wrote a simple jQuery Plug-in which provides a tested, reusable solution for loading external templates. After having leveraged the Plugin on quite a few different projects, I decided to open source it as others may find it useful as well.

Using the Plugin

Using the jQote2 Template Loader plugin is rather straight forward. Simply include jQuery, jQote2 and the jquery.jqote2.loader-min.js script on your page.

As a basic example, assume a file named example.tpl exists, which contains the following template definition:

<![CDATA[

<% var article, i, n;

for ( i = 0, n = this.articles.length; i < n; i++ ) {

article = this.articles[i];

</header>

</article>

<% } %>

]]>

</script>

We can load the example.tpl template file described above via $.jqoteload as follows:

$.jqoteload('example.tpl', function(templates) {

// create some mock articles...

var articles = [{

text: 'Articles A test...'

}, {

text: 'Articles B test...'

}, {

text: 'Articles C test...'

}];

// Render the articles...

$('#articles').jqoteapp(templates.articles_tpl, {

'articles': articles

});

After example.tpl has been loaded, from another context we can access the compiled templates via their template element id. In this example "articles_tpl".

//... within some other context, access the same

// compiled template

var template = $.jqoteret( 'articles_tpl' );

You can grab the source and view the example over on the jQote2 Template Loader Github page.

December 12, 2011 APIs / Design Patterns / HTML5 / JavaScript

3 Comments