KnockoutJs–MVVM in HTML & Javascript

20 בNovember 2011

no comments

KnockoutJs – MVVM in HTML & JavascriptKnockoutJs

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.

MVVMing with KnockoutJS

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.

kick it on DotNetKicks.com

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*