Skip to main content

Knockoutjs MVVM using Java Script

During the past working days I have been a little confused about some concepts in the KnockoutJS and how stuff works in the hierarchy we are using, how should we bind stuff.

  • First of all to get a brief introduction on KnockoutJS, it is a java script library written to apply MVVM pattern on html or ASP MVC ”if you do .NET ” and by MVVM we can only say the word that we used very often while doing Silverlight or WPF, the word is BINDING the magical word that simply makes the speed and interactivity between your model and view irresistible, do we use binding yes !!! and boy this is one sexy word that I would love to use, binding was one of the strongest points that Silverlight had, thanks to knock out we can do it here

  • I am not going to dig deep into this as I am still new at it beside I don’t wanna do code, just concepts and clarifications to make life easy for those who want to use KnockoutJS.

  •  Why use it where should the model be how to bind all these questions I will answer with code sample to clarify if you have not seen Steve Sanderson video its ok, but I highly recommend, no body explains it better.

  • First the create in the JS File to be the ViewModel : they act as in MVVM view Model how? Simply by including the binding data in Javascript objects or functions, in other words it is our DataContext which we should bind our views to and could contain eather java script dom objects or functions to be used.Here is an example of a model that use in a project of mine 
  •  Note the ko.observable is a defined type in the knockout which has a built in notifier and thus notifies the view when it changes so it can be updated via binding 

  • Second how should we use the ViewMoel we created using JS: On the server side we pass our dynamic objects to the ViewBag “that’s it for you server-side nothing more”, next using javascript we fill our previously created objects in the ViewModel “which should be referenced and thus seen in the view” with the data from the ViewBag we can then add java script to perform a certain functionality of what so ever.

  • this the part where the page loads and the data is filled from the server to the java script object created above, weather you are using MVC or ruby on rails or whatever you should be able to figure this step on your own
  • Last we set the binding by using the code below ko.applybinding(my.product); and thats it


  1. BlueHost is definitely one of the best hosting provider with plans for any hosting requirements.


Post a Comment

Popular posts from this blog

(AsyncWebClient) Async Webclient for windows phone 8

Using windows phone web client is pretty common but the thing is you can not use it using Async -> Await mechanism so i used threading to create an async functionality for The Download string and upload string methods here is the code below // Comment public class AsyncWebClient { public Task DownloadString(Uri uri) { var task = new TaskCompletionSource(); try { var client = new WebClient(); client.DownloadStringCompleted += (s, e) => { task.SetResult(e.Result); }; client.DownloadStringAsync(uri); } catch (Exception ex) { task.SetException(ex); } return task.Task; } public Task UploadString(Uri uri, string content) { var task = new TaskCompletionSource(); try { var client…

RuntimeBinderException cannot resolver property in Unit Test in case of dynamic return.. Solved

Xamarin UI Tests – Deep dive Part 1

IntroAs the title may describe this is the first of the series of articles that will cover the UI Test of Xamarin in a deep dive, we will start simple and then dig deeper as we go. Since this is very well the first of the series, it will mostly cover up the architecture and the testing technique that Xamarin UI Tests uses.

The Technology
Xamarin UI Test is an automation testing framework similar to selenium, Watir, Watin (.net), Robot and Sikuli, if you have used BDD (Behavioral Driven Development) or a more advanced TDD (Test Driven Development) approach at least you must have come across one of these frameworks, and in that perspective comes Xamarin UI Testing as an automation framework designed specifically for Xamarin Automation testing, For starter Xamarin UI Tests was not build from scratch, instead it was built on top of another UI Automation testing framework that is targeting android and iOS sepecifically which is Calabash, I have to say that this choice was made wisely as of n…