Bakckbone + KendoUI: Menu

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>
  <navigation class="menu">
  </navigation>

  <header>
    <h2>Article Title</h2>
  </header>

  <article>
    <p>some article content</p>
  </article>

CSS

body { 
    padding: 15px;
}

header {
    margin: 10px 00px;
}

h2 {
    font-size: 15pt;
    font-weight: bold;
    margin: 15px 0px;
}

p {
    margin: 10px 0px;
}

JavaScript

var MenuView = Backbone.View.extend({

    tagName: "ul",

    render: function(){
        
        // "render" a menu of list items
        var content = "<li>Menu Item</li><li>Another Item</li>";
        this.$el.html(content);
        
        // The rendered items are not yet in the DOM. They are only
        // attached to the view instances. But we can still call
        // KendoUI's ".kendoMenu()" because this widget is not
        // dependent on the visible DOM
        this.$el.kendoMenu();
        
    }        
});

// Create the view
var menu = new MenuView();

// Render it and convert it in to a KendoUI menu
menu.render();

// Attach it to the DOM
$("navigation.menu").append(menu.$el);