Using Kendo UI templates with Backbone

Backbone and Kendo make a beautiful combination as we've already seen. But this dynamic duo doesn't stop with the use of the Kendo control suite. Backbone's flexibility and defining characteristic of open and unopinionated structure allow it to be combined with more of Kenod's capabilities than just the controls. For example, we can use Kendo's templates with Backbone views very easily. Before I dive in to that code, though, I'll take a moment to review Backbone's basic view rendering.

Rendering A Backbone.View

Most Backbone.View objects have a render method that is used to generate the HTML content for the view. The actual mechanics of generating that HTML, though, is left up to the developer and team that is writing the application. Frameworks like MarionetteJS, ChaplinJS and others, abstract this detail away by providing defaults that can be overridden easily. But when writing a raw Backbone.View, the choice is left for you to make.

You could easily hard code a string with HTML tags in it:

var MyView = Backbone.View.extend({ 

  render: function(){
    var content = "<h2>Hello there!</h2>";
    this.$el.html(content);
  }

});

Or you can use a template engine such as Underscore.js' built in template function, Handlebars, Mustache, Jade, or any of a dozen other JavaScript template engines, including Kendo UI's.

The majority of these template engines have a two-step process for rendering the desired content:

1. Compile the raw template string in to a JavaScript function
2. Call the function and apply some data to the compiled template

When working with Backbone, there are a few additional steps that need to be injected such as pulling the raw template content from the DOM and building a JavaScript object literal with the data that the compiled template needs. You also need to populate the view with the resulting HTML string when the template has been run.

The end result often looks like this (using Underscore.js - a prerequisite of Backbone.js and a common choice for rendering Backbone views):

<script type="text/html" id="about-me-template">
  <h2>About <%= name %></h2>
  <ul>
    <li>Employer: <%= employer %></li>
    <li>Title: <%= title %></li>
    <li>Job Description: <%= description %></li>
  </ul>
</script>

var MyView = Backbone.View.extend({

  render: function(){

    // step 1: grab the template from the DOM
    var templateHtml = $("#about-me-template").html();

    // step 2: compile the template
    var compiled = _.template(templateHtml);

    // step 3: build an object literal with the data
    // that we want to display in the template
    var data = {
      name: "Derick Bailey",
      employer: "Telerik",
      title: "Developer Advocate for Kendo UI"
    };

    // step 4: apply the data to the template to
    // produce a raw string that contains the HTML
    var content = compiled(data);

    // step 5: populate the view with the result
    this.$el.html(content);
  }
});

Rendering A Backbone.View With A Kendo UI Template

Having established a baseline for rendering a Backbone.View, here is what it takes to convert the above example in to a Kendo UI template:

<script type="text/html" id="about-me-template">
  <h2>About #= name #</h2>
  <ul>
    <li>Employer: #= employer #</li>
    <li>Title: #= title #</li>
  </ul>
</script>  

var MyView = Backbone.View.extend({

  render: function(){

    // step 1: grab the template from the DOM
    var templateHtml = $("#about-me-template").html();

    // step 2: compile the template
    var compiled = kendo.template(templateHtml);

    // step 3: build an object literal with the data
    // that we want to display in the template
    var data = {
      name: "Derick Bailey",
      employer: "Telerik",
      title: "Developer Advocate for Kendo UI"
    };

    // step 4: apply the data to the template to
    // produce a raw string that contains the HTML
    var content = compiled(data);

    // step 5: populate the view with the result
    this.$el.html(content);
  }
});

The result can be found in this JSFiddle.

Note that there isn't much of a difference between the underscore and Kendo UI version. In the template, underscore uses <%= ... %> blocks to denote data while Kendo uses #= ... # blocks. Then in the view itself, we only needed to change one line in the render method to say kendo.template instead of _.template. Other than that, the view and template are the same between the two versions of this example.

More Than Simple Templates

As you can see, Backbone's flexibility allows it to be combined with Kendo's capabilities easily. And Kendo offers more than just the simple templates that I've shown above. It has many more options and capabilities that can be found in the documentation and demos, and provides additional functionality such as input validation, globalization and more that can be added in to a Backbone application.