Data

Kendo.Class

kendo.Class is the base class in the framework. Any other objects can be created by using kendo.Class.extend, which means the new object inheritated from kendo.Class (a new object)

// Create a base class
var Animal = kendo.Class.extend({
    // The `init` method will be called when a new instance is created
    init: function(legs) {
       this.legs = legs;
    }
});

When inheritance, the init function will be called as initialization. any object inheritance is based on kendo.Class.Extend.

// Inherit from that class

var Bird = Animal.extend({
    init: function() {
        // Use the `fn` field to call the `init` method of the base class (Animal)
        Animal.fn.init.call(this, 2);
    }
});

var birdie = new Bird();

console.log(birdie.legs); // outputs 2

/* kendo.Class */ 
Class.extend = function (proto) {
// base     - declare a new empty class  
// subclass - proto.init, it serves as a constructor 
var base = function () {
// subclass is referenced to proto.init function
}, member, that = this, subclass = proto && proto.init ? proto.init : function ()                 {
// the arguments object is an Array-like object corresponding to the arguments passed to the function. 
  that.apply(this, arguments); // ??
}, fn;
 // base - current context 
 base.prototype = that.prototype;
 // subclass.prototype = base (linked)
 // fn is the shortcut of subclass.prototype

  fn = subclass.fn = subclass.prototype = new base();

 // loop through the proto properties (init, and others ... )
 // merge the members
 // subclass = proto.init?
 // fn = subclass.fn / subclass.prototype ?
for (member in proto) {
    if (proto[member] != null && proto[member].constructor === Object) {
// merge (overwrite the properties in base class)
        fn[member] = extend(true, {}, base.prototype[member], proto[member]);
    } 
    else {
         fn[member] = proto[member];
    }
 }
// set up fn (subclass.prototype)    
fn.constructor = subclass;
// set up subclass.extend as well, so subclass can be extended later
subclass.extend = that.extend;
return subclass;
};

kendo.Observable

kendo.Observable is just a reusable pattern for listening and firing events on objects, we can use the bind() and trigger() methods to setup custom events on the widgets and trigger them.

Each widget inherits from kendo.ui.Widget, which directly inherits from kendo.Observable.

/*
Important: Complex fields are automatically wrapped in nested ObservableObject instances. 
Array fields are wrapped as kendo.data.ObservableArray objects. 
The change event of the child objects will bubble to the parent ObservableObject. 
Fields with names that are prefixed with an underscore will not be wrapped.

create object as property, it will automatically wrapped with observable
*/

// creating a new ObservableObject via its constructor
  var viewModel = kendo.observable({
            person: {
                name : "John Doe"
            }
  });

  // get the data from view model

  var personName = viewModel.get("person.name");
  alert(personName);

  // set the data 
  viewModel.set("person.name", "liang");

  var personName2 = viewModel.get("person.name");
  alert(personName2);

  // using the kendo.observable method

  var observable = new kendo.data.ObservableObject({ name: "John2 Doe" });
  alert(observable.name); 
  alert(observable.uid); 

  // bind 
  observable.bind("change", function (e){
            alert(e.field); 
  }); 

  observable.set("name", "Mike"); 

  // toJSON
  var json = observable.toJSON(); 
  alert(json);
  alert(JSON.stringify(json));