Bakckbone + KendoUI: Using Kendo's Templates

Combining BackboneJS and KendoUI controls

by derickbailey

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.wreqr/master/lib/backbone.wreqr.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.eventbinder/master/lib/backbone.eventbinder.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.marionette/master/lib/backbone.marionette.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<script type="text/html" id="about-me-template">
  <h2>About #= name #</h2>
  <ul>
    <li>Employer: #= employer #</li>
    <li>Title: #= title #</li>
  </ul>
</script>

<div id="placeholder"></div>

CSS

h2 {
  font-size: 14pt;
  font-weight: bold;  
}

ul {
  margin-left: 15px;
  list-style: circle;
}

li {
  padding: 5px;
  margin-left: 15px;
}

JavaScript

var MyView = Backbone.View.extend({
  
  template: "#about-me-template",
  
  render: function(){
    var templateHtml = $(this.template).html();
    var compiled = kendo.template(templateHtml);
    var data = this.model.toJSON();
    var html = compiled(data);
    this.$el.html(html);
  }
  
});

var me = new Backbone.Model({
  name: "Derick Bailey",
  employer: "Telerik",
  title: "Developer Advocate for Kendo UI"
});

var view = new MyView({
  model: me
});

view.render();

$("#placeholder").append(view.$el);