- Add references to the latest jQuery dependencies, Wijmo widgets, Knockout .js file, and KO extension library for Wijmo.
- 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 thetags. 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>
When you open the page, it looks similar to the following 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:
- ComponentOne Invexplorer: Check out our live ComponentOne Invexplorer sample that uses Wijmo with KnockoutJS, jQueryUI, and jQuery/Globalize to create a stock browser application similar to Google Finance. You can also download the sample or view the source.
- Knockout Demo: Explore how to use the Wijmo widgets with Knockout and view the source for each sample.
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!