Wednesday, April 23, 2014

Defining JavaScript class in Knockout

We all know how to write a class in traditional languages such as C#, Java etc. With more trend towards Single Page Applications we are all moving towards writing JavaScript classes. In this blog I will present my preferential way of writing a JavaScript class while using Knockout. The approach is generic enough you can use this with another framework

Here is my typical structure:

define([], function () {
    var title = ko.observable();
    var vm = {
        activate: activate,
        title: title
    };

    return vm;

    function activate() {
        return true;
    }
});

There are 4 sections in this structure. Here are the details of each section

1.       At the top I am using AMD module loaders such as RequireJS to load all the dependencies. This is like include files.
define([], function () {
   // Your class code
});

2.       Once all the dependencies are loaded. I define all my private variables.
var title = ko.observable();

3.       This is the most important piece. This section contains the public properties our javascript class exposes. This like an interface in C#. Using this we can restrict what the consumer can access our object.
    var vm = {
        activate: activate,
        title: title
    };

    return vm;

As you see I am allowing consumers to access activate method and the property title.

4.       In this last section we can define all our functions (both public and private)
    function activate() {
        return true;
    }

As you see with this structure you can get the feel of a traditional class in JavaScript.

No comments:

Post a Comment