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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <script id="row-tpl" type="text/x-kendo-template"> <tr> <td>${ name }</td> <td>${ released }</td> </tr> </script> <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <script id="row-tpl" type="text/x-handlebars-template"> <tr> <td>{{name}}</td> <td>{{released}}</td> </tr> </script> <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.
{Sorry, Comments are currently Closed! }