Cleaning after Knockout

יום שלישי, ינואר 29, 2013

Using KnockoutJS is really fun. You set some data-bind attributes on your HTML and KnockoutJS does the magic of binding it to a JavaScript object (A.K.A, view model) An important fact that most of us are missing is that Knockout holds some internal data structure to manage its magic. Basically, every time you call ko.applyBindings a new management record is added to KO internal representation. This means that your view model is being held by some global data managed by KO. So in case you create and destroy HTML dynamically using JavaScript the view model is...

Building Single Page Application

יום חמישי, אוגוסט 23, 2012

Taking HTML to the extreme is all about developing Single Page Application (SPA). Fetch all required HTML + JavaScript + CSS files from the server and then use the server only for data manipulation. No more “HTML server side rendering” and no more “partial page updates”. Doing so allow you to offer your end users a much more attractive user experience. For example, since all required files are up front loaded to the browser we can use HTML5 Offline Web Application feature to allow our web application to be executed on the client machine even if the server...
no comments

Doing OOP with JavaScript

יום רביעי, אוגוסט 15, 2012

Currently there are two main approaches to simulate object orientation in JavaScript Classical approach - We use the prototype object to define instance methods. Every object “enjoy” the methods defined inside the prototype. Inheritance is achieved by one prototype that extends another one. Modern approach – Each object define its own methods and fields. Inheritance is achieved by one object that extends another one. Classical approachfunction Shape(x, y) {     this.x = x;     this.y = y; } Shape.prototype.show = function () {     var details,         message = "";     details = this.getDetails();     for (var key in details) {         message += (key + ": " + details + "\n");     }     alert(message); } Shape.prototype.getDetails = function () {     return {         x: this.x,         y: this.y     }; } function Rect(x, y, width, height) {     Shape.call(this, x, y);     this.width = width;     this.height = height; } Rect.prototype.getDetails = function () {     var details = Shape.prototype.getDetails.call(this);     details.width = this.width;     details.height = this.height;     return details; } Function.prototype.extend = function (func) {     var base,         derived;     base = func.prototype;     derived = this.prototype;     for (var methodName in base) {         if (base.hasOwnProperty(methodName) && !derived) {             derived = base;         }     } } Rect.extend(Shape); var s = new Rect(5, 10, 200, 100); s.show();Few facts We use the prototype object to define...
2 comments