Long long time ago, there came a language, a language that changed not only the look of the Web but also changed our perception of interaction with the internet. It is only this language that made web interactive, responsive and beautiful. And the language is none other than, JavaScript. After it’s creations at Netscape’s yard, JavaScript evolves very rapidly, in fact the growth is so rapid that it gained popularity among web developer/Designer in no time. People started loving it, started using it in every web design they make, it was everywhere.
No doubt JavaScript is such good and awesome, but it becomes very difficult to handle as the code grows. Until you have properly organization of the code blocks, the language you love could bite you hard. In order to tame your ever increasing code, you need to follow a rather sophisticated approach, and MVVM (Model View ViewModel) architectural pattern is one of them. There are several libraries that would help to utilize this pattern, but for this post and later we will be using Knockout.JS.
You can download the latest code for knockout from this link.
This post is all about giving you a kick start with knockout.js. Later with the upcoming post we would rather take a deep understanding of various concepts.
The View
The view is what user sees and interacts with. For our case it will be pure HTML. Create an HTML file in one of your favorite IDE, I am using Adobe Dreamweaver for this. Our view will have a Textbox where user can insert a text and when he tabs out of it, the same text will be mimicked in the paragraph tag below. Purely simple. Now copy the exact code as below in your html file:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3: <html lang="en">
4: <head>
5: </head>
6: <body>
7: <div id="content">
8: <input type="text"/>
9: <br/><br/>
10: <p></p>
11: </div>
12: </body>
13: </html>
The ViewModel
The ViewModel is what makes the view responsive to user’s action. Like validating input, showing help notifications etc. In our case the ViewModel would be a simple Javascript file that response to the action that user performs. So create a new JavaScript file and write in it the following code.
1: var ViewModel = function() {
2: this.insertedText = ko.observable();
3: } 4: 5: ko.applyBindings(new ViewModel());
The thing which is important to understand is “ko.observable()”. Knockout has the concept of observables, that to say it will observe the values of the variable that it is assigned to. It will be clear once we bind the ViewModel’s object to the View. While “ko.applyBindings(new ViewModel())” just activate the Knockout.
The Binding
You might ask if ViewModel makes the View responsive, they have to have some connectivity among them? Well, yes. This is why binding is there. Look at the following code of the View for example:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3: <html lang="en">
4: <head> 5: </head> 6: <body> 7: <div id="content">
8: <input type="text" data-bind="value: insertedText"/>
9: <br/><br/> 10: <p data-bind="text: insertedText"></p>
11: </div> 12: 13: <script src="js/knockout 3.0.0.0.js" type="application/javascript"></script>
14: <script src="js/ViewModel.js" type="application/javascript"></script>
15: 16: </body> 17: </html>As you can see, in the Input and paragraph tag, “data-bind” property is added. What it do is, it binds the property “Value” and “Text” for the Input and Paragraph control respectively with a single property “insertedText” which is their in the ViewModel. Since the property “insertedText” is defined as observable, it will be observed for any changes. If it has changes, it will be reflected onto the View or the ViewModel. Next both the JavaScript files, Knockout and ViewModel has been accessed via the Script tag below.
Just run the code and you can see the power of Knockout yourself.
Happy Coding!!!
Posts
0 comments