HTML5 Everywhere : Part 3 Wijmo with Knockout

Script 3: Using Wijmo with Knockout Wijmo now supports Knockout (KO)! KO is a JavaScript library that uses the Model View View Model (MVVM) pattern. It allows you to easily create and maintain a dynamically changing UI. You can use KO in addition to jQuery to enhance your pages with an underlying data model. For a full KO introduction, tutorials, documentation, explanation of MVVM and more, visit http://knockoutjs.com/. 1) Open Visual Studio, Select File | New Project | Visual C# Web | ASP.NET Empty Web Application SNAGHTML208cbe88 2) Add an Html page by right clicking on the project Select Add | HTML Page image You can easily use Knockout with Wijmo by following a few simple steps:

  • Add references to the latest jQuery dependencies, Wijmo widgets, Knockout .js file, and KO extension library for Wijmo.
  • Create the ViewModel and View: add JavaScript to define the data and behavior of the UI, and add markup to create the View—the visual, interactive UI.
  • Bind the Wijmo widget(s) to the ViewModel and activate KO.

This sample will show all of the above steps and we'll create a text box, slider, and gauge that are bound together so that when the value of one element is changed, the other elements update accordingly. 3) Add Library References: Add links to the dependencies to your project within the tags. To do this, just link to the content delivery network (CDN) files: Note: Please reference the latest dependencies from the CDN at http://wijmo.com/downloads/#wijmo-cdn.

To link to the Wijmo widgets, add the following CDN link within the tags:

 

 

Then add a reference to Knockout and the Knockout extension library for Wijmo within the tags:

 

The code should look something like this: <!DOCTYPE html>

 

 

 

 

 

4) Create the ViewModel and View: Now create a view model to define the data and behavior of the UI. Enter the following

 

 

 

 

<!-- Line 25 Create ViewModel -->

<!\-\- when document loads, create ViewModel, and apply bindings --> <script type="text/javascript"> <!--Create ViewModel--> var viewModel = function () { var self = this;
    self.val = ko.observable(50);
    self.min = ko.observable(0);
    self.max = ko.observable(100);
};
$(document).ready(function () { var vm = new viewModel();
    ko.applyBindings(vm);
}); </script>

 

Textbox

Slider

Gauge

When you open the page, it looks similar to the following image. image Enter a new value in the textbox or drag the slider. Notice the values on the other elements change to match the specified value. This sample demonstrates the power of two-way live binding in Knockout. It also shows how much code can be saved by using widgets that support two knockout binding. The widgets are both listening for changes in ViewModel events and pushing changes to the ViewModel. That allows you to always program against the ViewModel and never have to worry about handing change events on the widgets or other DOM elements just to update your data. Using this MVVM pattern can really keep applications clean and structured, allowing you to focus on business logic and not spend time writing UI event handing and DOM manipulation code. Samples using Wijmo and Knockout See Wijmo and Knockout in action with the following samples:

Visit http://www.wijmo.com for more details. This example above is part of the Intro to Using Wijmo with Knockout post at: http://wijmo.com/wiki/index.php/Using_Wijmo_with_Knockout Also, see link above for use with several different kinds of controls, including many charts. Another great example of the incredible content we have here at ComponentOne with great information at the C1 Wijmo Site!

MESCIUS inc.

comments powered by Disqus