Adapters: Knockout

Intro

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.

API Differences from WinJS

  1. Instantiating a winJS control
  2. 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>
  3. Data Binding
  4. 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>

Learn More

Further information at GitHub: knockout-winjs project.