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">
    <ul>
      <li>Menu Item</li>
      <li>Another Item</li>
    </ul>
  </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({

  // select the menu from the DOM
  el: "navigation.menu",

  // The "initialize" method like a constructor. It is called when we call "new MenuView()".
  initialize: function(){

    // find the "<ul>" tag in this view's "el", and turn it in to a menu
    this.$("ul").kendoMenu();

  }

});

// Create the view, and turn the navigation element in to a menu.
var menu = new MenuView();