KnockoutJS is defined on their website http://knockoutjs.com/documentation/introduction.html, as follows:
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.
Any time you have sections of UI that update dynamically. Knockout can help you implement it more simply and is maintainable.
Here is what Wijmo says about KnockoutJS:
Wijmo now supports Knockout (KO), a JavaScript library that uses the Model View View Model (MVVM) pattern, allowing 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/.
Before we get started, note that this recipe is for anyone who has a prior familiarity with KnockoutJS, occasionally referred hereafter as KO. Please visit the KO website for an introduction if you are not familiar with it.
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
andView
objects: add JavaScript to define the data and behavior of the UI, and add markup to createView
—the visual, interactive UI.Bind the Wijmo widget(s) to
ViewModel
and activate KO.
Having known what both sides, Wijmo and Knockout, have to say about the awesome Knockout library, we can proceed by creating our first Knockout-integrated widget. First of all, to integrate the KnockoutJS library into our widgets, we would have to reference the Knockout files hosted in the Wijmo CDN as follows:
<script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.0.0.js"></script> <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script>
Assume we want to create an app or widget that can accept a measure of temperature in Celsius and return its Fahrenheit equivalent. For creating the input, we will have an input field that has a preset Celsius value and a linear gauge widget, also known as wijlineargauge
, that will animate to the Fahrenheit-equivalent value. Enter the following code in your editor and run:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Wijmo MVVM Support</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style type="text/css"> body { font-size: 13px; } </style> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <!-- Wijmo CSS and script --> <link type="text/css" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" /> <link type="text/css" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.css" rel="stylesheet" /> <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.1.0.min.js"></script> <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.js"></script> <!-- KnockoutJS for MVVM--> <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.0.0.js"></script> <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script> <script type="text/javascript"> <!-- when document loads, create ViewModel, and apply bindings--> <!-- Create ViewModel--> var viewModel = function () { var self = this; self.celsius = ko.observable(20); self.kelvin = ko.computed(function(){ //console.log('self.celsius = ' + self.celsius); return self.celsius() * 273; }, this); self.fahrenheit = ko.computed(function(){ //console.log('self.celsius = ' + self.celsius); return self.celsius() * 1.8 + 32; }, this); self.min = ko.observable(0); self.max = ko.observable(200); }; <!-- Bind ViewModel--> $(document).ready(function () { var vm = new viewModel(); ko.applyBindings(vm); }); </script> </head> <body> <div class="container"> <h2> Celsius Textbox - Edit Here!</h2> <input data-bind="value: celsius" style="width: 200px;" /> <div> <h2> Fahrenheit Slider - Don't Edit!</h2> <div data-bind="wijlineargauge: {value: fahrenheit, min: min, max: max}" style="width: 800px;"> </div> </div> </div> </body> </html>
If the code runs successfully, you should see the following image in your browser:
The Wijmo and Knockout libraries are referenced and included in our app. The ViewModel
object is created, which has all the properties necessary for our app to function properly. The self.celsius
property is an observable property, which is used to calculate self.fahrenheit
. Also, self.min
and self.max
are used to set the minimum and maximum values of the gauge respectively. Then, we apply bindings of the ViewModel
object to the view elements as shown in the following code:
ko.applyBindings(vm);
To finalize this recipe, we will create one more widget that will exhibit the beauty and overall importance of KO real-time data binding. This time we want to be able to update a simple pie chart right after a value entry for male and/or female.
Enter the following code in an editor and open it in a browser:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Wijmo MVVM Support</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style type="text/css"> body { font-size: 13px; } </style> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <!-- Wijmo CSS and script --> <link type="text/css" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" /> <link type="text/css" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.css" rel="stylesheet" /> <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.1.0.min.js"></script> <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.js"></script> <!-- KnockoutJS for MVVM--> <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.0.0.js"></script> <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script> <script type="text/javascript"> <!-- when document loads, create ViewModel, and apply bindings--> <!-- Create ViewModel--> var viewModel = function () { var self = this; self.boys = ko.numericObservable(50); self.girls = ko.numericObservable(30); }; <!-- Bind ViewModel--> $(document).ready(function () { var vm = new viewModel(); ko.applyBindings(vm); }); </script> </head> <body> <!--Create View--> <div> males: <input type="text" data-bind="value: boys" /> females: <input type="text" data-bind="value: girls" /> </div> <div class="piechart" data-bind="wijpiechart: { width: 600, height: 400, seriesList: [{ label: 'Boys', data: boys }, { label: 'Girls', data: girls } ] }"> </div> </body> </html>
The preceding code sets up our ViewModel
object with the boys and girls numeric observable properties. Our data is then bound to the views, and finally, we bind the piechart
div to the wijpiechart
object, passing the necessary values for the chart.
So far so good! This was easy, clean, and straightforward. One easily notices that the views and the view model are separate with only data bindings. In real-life software development, KO eliminates embedding server-side variables and dependencies within the views. The views should be purely HTML!
If successfully run, you will see a widget in your browser similar to the following screenshot: