So far all my development was using Silverlight. Now that Microsoft officially killed (I know, I know and lets not go there) Silverlight, we started looking at future alternatives. One of the task was to look at knockout JS. One of the reason was as a Silverlight developer who enjoys MVVM pattern, I should be able to adapt to it fast. So in this blog I am not going to talk about how to do things in Knockout JS, rather the tools you need to have to get started.
One thing I really I love about Knockout JS is, amount of documents available for newbie like me to get started. First of the links that you must have
The mother ship is @ Knockout JS. In my opinion you will not need anything else. This has fantastic starter tutorials, excellent documents. I wish every one creates web site like this some day. One another site you need to have in your bookmark if you decide to develop is Knock me out. This blog lots of tips and tools that is going to make your coding life so easy.
There are two forums that you can get answers from. Google groups and of course Stack overflow. In my opinion, I would recommend you guys to use Google Forums, I seem to get more response there than stack over flow. Oh by the way, I asked one question on Stack overflow, guess who answered, John Papa himself. I was so happy to see, John Papa is on Knockout camp. I will come to that in a minute.
Ok development environment. So you decided to start testing and play around with Knockout JS. One thing you need to think about is, how are you planning to develop the app. As you all know, I am more inclined to Microsoft IDEs so I am going to talk about only MS IDEs. You could develop Knockout sites using ASP.Net MVC templates. You will end up using ASP.Net features inter mingled with Knock out. I wanted to learn Knockout with out the noises of other technologies and focus purely on Knockout. I still want ease of development and of course intellisense. I came across Web Matrix day before yesterday and I fell in love immediately. Please remember to download the beta (2/18/12) It is so easy to develop and file based operation make it easy to drag and drop files and make it available to the solution etc., One good thing is if you want to develop ASP.Net MVC model you can develop it in there also, if you want to develop pure HTML model, you can do that also, that is what drawn me to this. So if you are setting up environment like me
4. Download knock out mapping. (If you plan to do JSON)
Now that you have all in place, lets start building our first knock out code. Fire up Web matrix
In here, click on templates and create an empty site as shown below, name the site as HelloWorld
Now the site is created and it will take you a page something like
Please make sure you have downloaded knockout JS (KO) (step 2 of the download). Now click on the Files option on bottom left hand side
which will toggle the top left hand side to show the files instead of site.
First thing I do, is to create Scripts folder, where I am going to house all my scripts. So right click on the HelloWorld and create a new folder
call it Scripts. Next, open the Script folder so that you can copy knockout js that you have downloaded. One thing, I need to point out here, there is no solution or project model that we used to in Visual Studio. If a file is available in the directory structure then the file is available to use. So the idea here is that, if you want a file added to script, all you have to do is drop the file in Scripts folder. So, to do that, right click on Scripts folder and make it show the folder in windows explorer. Now copy KO js into the folder from your download directory. If you copied the file and if it does not show up in the web matrix view, make sure you right click on the directory and do ‘Refresh’. That’s is it, now we have the environment setup to write the code.
We could write the Hello world like java script model all in view, but we are doing knock out, so lets do it like we do it in MVVM, we will use binding to show Hello World. We are going to create a view model and setup a property which will have a string value of Hello World which is what we are going to bind in the view to show hello world. So do that, we click on Scripts folder and add a new java script file called ViewModel.js
Paste the code from below to make your view model java script
1: /// <reference file="knockout-2.0.0.js" />
2:
3: function ViewModel() {
4: var self = this;
5: self.helloWorld = "Hello World";
6: };
7:
8: var viewModel;
9:
10: function init(){
11: this.viewModel = new ViewModel();
12: ko.applyBindings(viewModel);
13: }
1 –> it is a required line, you add the reference to the javascript library so that web matrix can give you intellisense. If you do not have this line, then line 12, when you type ko. it will not show available methods.
3-6 –> This is our view model. Here we have one property called helloWorld which has ‘Hello World’ string assigned to it.
8 –> define the view model variable to be used in binding.
10-13 –> This is a very important method. This is required if you would want to separate the view and view model separate. You will see in a minute, this method is called on html body load so that, view model is created and also all the ko binding are applied as well.
Now lets look at our view. For our view, I am using the default.cshtml file.
1: <!DOCTYPE html>
2: <script src="Scripts/knockout-2.0.0.js" type="text/javascript"></script>1:2: <script src="Scripts/ViewModel.js" type="text/javascript"></script>
3: <html lang="en">4: <head>5: <meta charset="utf-8" />6: <title></title>7: </head>8: <body onload="init()">9: <p><span data-bind="text: helloWorld"></span></p>10: </body>11: </html>
2 –> references the ko js library and viewmodel java script.
8 –> instantiate the view model on the html load.
9 –> binds the helloWorld property of the view model to the DOM element.
That’s all folks. There is a clear separation of view and view model. Not only there is separation, this allows us to do unit testing of view model easy.
Few points to remember;
1. Make sure every html tag have associated end tag. If you do not, the ko will not come around and inject the code for you. I had a code like
<strong data-bind=”text: helloWorld”/> <—– this will not work.
<strong data-bind=”text: helloWorld”></strong> <— this works.
2. When using web matrix, in your view model, add reference to all the js library you are using so that web matrix can help you with intellisense.
3. I like web matrix model of developing KO application since, it is file based, I can just copy files without dependencies and is pure HTML/JS development. But if you choose to develop using ASP.Net MVC, that is also build into it.
Unni's space 