Bakckbone + KendoUI: Splitter (Working Version - With Marionette)

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="layout-template">
        <div id="top-pane">
            <div id="horizontal" style="height: 100%; width: 100%;">
                <div id="left-pane">
                    <div class="pane-content">
                        <h3>Inner splitter / left pane</h3>
                        <p>Resizable and collapsible.</p>
                    </div>
                </div>
                <div id="center-pane">
                    <div class="pane-content">
                        <h3>Inner splitter / center pane</h3>
                        <p>Resizable only.</p>
                    </div>
                </div>
                <div id="right-pane">
                    <div class="pane-content">
                        <h3>Inner splitter / right pane</h3>
                        <p>Resizable and collapsible.</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="middle-pane">
            <div class="pane-content">
                <h3>Outer splitter / middle pane</h3>
                <p>Resizable only.</p>
            </div>
        </div>
        <div id="bottom-pane">
            <div class="pane-content">
                <h3>Outer splitter / bottom pane</h3>
             ...

CSS

body { 
    padding: 15px;
}

header {
    margin: 10px 00px;
}

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

p {
    margin: 10px 0px;
}

JavaScript

var SplitterLayout = Marionette.ItemView.extend({
    template: "#layout-template",
    
    id: "vertical",
    
    // The "onShow" method is called by Marionette's region, after the
    // view has been placed in the DOM
    onShow: function(){    
        
        // The content is in the DOM now. We can call the kendoSplitter function on it, 
        // and it will turn out the way we expect it to
        this.$el.kendoSplitter({
            orientation: "vertical",
            panes: [
                { collapsible: false },
                { collapsible: false, size: "100px" },
                { collapsible: false, resizable: false, size: "100px" }
            ]
        });

        this.$("#horizontal").kendoSplitter({
            panes: [
                { collapsible: true, size: "220px" },
                { collapsible: false },
                { collapsible: true, size: "220px" }
            ]
        });
        
    }
    
});


// Create a region to manage the content of the "#placeholder" element
var region = new Marionette.Region({
    el: "#placeholder"
});

// Create the view
var splitter = new SplitterLayout();

// Show the view in the region
region.show(splitter);