Kendo UI

jQuery + Kendo UI + MockJax

by burkeholland

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.blueopal.min.css">
<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<script src="https://getfirebug.com/firebug-lite.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="content"></div>

JavaScript

function log(msg) {
    $("#content").append("<p>" + msg + "</p>");
}
 
// create a new person class
var Person = kendo.Class.extend({
    firstName: 'Not Set',
    lastName: 'Not Set',
    isPrettyCoolPerson: false,
    init: function(firstName, lastName) {
        if (firstName) this.firstName = firstName;
        if (lastName) this.lastName = lastName;
    },
    sayHello: function() {
        log("Hello! I'm " + this.firstName + " " + this.lastName)
    }
});

// create a new John Bristowe of type person (He is really more machine than man. Twisted and EVILE.)
var person = new Person("John", "Bristowe");
// say hello John
person.sayHello();

// create a parent object of type person    
var Parent = Person.extend({
    firstName: 'Mark',
    lastName: 'Holland'
});

// create my dad. he was a parent - sometimes. just kidding dad!    
var myDad = new Parent();
myDad.isPrettyCoolPerson = true;

// say hello dad
myDad.sayHello();
// expose dad's coolness factor
    log("Cool? " + myDad.isPrettyCoolPerson);
        
// create a new child object that inherits from the parent    
var Child = Parent.extend({});

// create me. for more info on how this was actually done, talk to my dad.
var me = new Child();
me.firstName = "Burke";

// Hello!
me.sayHello();
// expose my coolness
log("Cool? " + me.isPrettyCoolPerson);