Bakckbone + KendoUI: Splitter (Failed Attempt)

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 = Backbone.View.extend({

    id: "vertical",
    
    render: function(){
    
        // compile the template using Underscore.js (a pre-requisite of Backbone)
        var template = $("#layout-template").html();
        var content = _.template(template, {});
        
        // Stuff the content in to the view
        this.$el.append(content);
    
        // The content is not yet in the DOM. We can try to call the
        // kendoSplitter function on it, but it won't turn out the way it should.
        this.$el.kendoSplitter({
            orientation: "vertical",
            panes: [
                { collapsible: false },
                { collapsible: false, size: "100px" },
                { collapsible: false, resizable: false, size: "100px" }
            ]
        });

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


// Create the view and render it
var splitter = new SplitterLayout();
splitter.render();

// Add it to the DOM
$("#placeholder").append(splitter.$el);