Adapters : Knockout

The knockout-winjs adapter allows for the use of Knockout data-binding within WinJS controls. It also allows winJS controls to bind to Knockout Observables, and use Knockout event listeners with winJS controls.

Instantiating a winJS control

In winJS, an element is declared through using the declarative markup:

                                             <div data-win-control="WinJS.UI.FlipView" data-win-options="{itemTemplate: templateName, itemDataSource: flipViewArray}"></div> 
                                        

In the winjs-knockout adapter, you would declare an control in Knockout declarative syntax, like this:

                                             <div data-bind="winFlipView: {itemTemplate: templateName, itemDataSource: flipViewArray}"></div>  
                                        

Data Binding

You can also use Knockout data-binding in WinJS controls. For example, this is how you would set up a template for the flipview in winjs-knockout:

                                                 <script type="text/html" id="flipViewTemplate">
                                              <div>
                                                <span>Name: </span><span data-bind="text: text"></span>
                                              </div>
                                              <div>
                                                <span>Rating: </span><span data-bind="text: rating"></span>
                                              </div>
                                            </script>
                                            
                                    

Further information at GitHub: knockout-winjs project.

Guide

Basics

WinJS Binding

Control Manipulation

Adapters

Overview

Angular

React

Knockout

Next Steps