KnockoutJs–MVVM in HTML & Javascript
KnockoutJs – MVVM in HTML & Javascript
Previously I’ve posted about MVVM and Silverlight, It seems long ago, before Microsoft has begun focusing on HTML & Javascript as a client development platform.
One of the things I’ve cherished the most about XAML related technologies development was the ability to completely decouple behavior and UI using MVVM. I didn’t know about any possibility to implement the same pattern on HTML & Javascript based applications.
In order to do so, we can now use KnockoutJS, a Javascript library based on jQuery that allows as to write an MVVM application with HTML and Javascript.
The first thing we’ll look for in MVVM is how to bind data from the View-Model. Our view-Model in this case will be a Javascript section separated from our HTML and looks like it doesn’t know anything about it (as MVVM should be). The view-model can certainly be on a separate file, however we’ll lack the intellisences doing so.
So, How we do it?
1. Obtain jQuery, you can do it by download it or linking to it directly. Note: You cannot use the version supplied by Visual studio 2010 because it’s minimum version is 1.4.2 (VS supplies 1.4.1)
2. Download KnockoutJs, latest javascript file. You can find the latest version on this download page.
3. Link your HTML file to both jQuery and KnockoutJs files
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="Scripts/knockout-latest.js"></script>
<title></title>
</head>
<body>
<!-- Your Page layout HTML (view) here -->
<script>
//Your View-Model code (javascript) here
</script>
</body>
</html>
Note: The view-model code has to be after your HTML content.
After having our page set-up, let’s have some javascript at the view model.
on our HTML content let’s make a span, and bind it’s text content to a property in the view-model:
<span>The time now is : </span>
<span data-bind="text: today"></span>
Let’s look at our view-model code. There we’ll create a view-model, add a data member called “today” (which we’ve bind our span text to) and with a simple javascript code have it updated every second
var viewModel =
{
today: ko.observable(),
updateDate: function () {
viewModel.today(new Date());
}
}
}
//Init data
viewModel.today(new Date());
// call updateDate every second
setInterval(viewModel.updateDate, 1000);
//Sets the page's data context
ko.applyBindings(viewModel);
Now, when browsing our page, we’ll see the clock at the span.
Summary:
This is, of course, a very simple example of how we can bind, but imagine the possibilities now of having an entire application with javascript and HTML, contacting the server through AJAX and not through for submission. You can now separate completely your javascript code from your UI design just as you did in WPF/Silverlight working with XAML & C#.
Of course, there’s still need for templates, handle events such as button click or text changes but this is for later posts.
