Adapter for KnockoutJS and WinJS, this code facilitates usage of WinJS UI controls in a Knockout application. It achieves this by creating bindings for the various controls which allow them to show up in Knockout data-bind attributes like:
The current rating is: <span data-bind="text: userRating"></span><br/>
<div data-bind="winRating: {userRating: userRating}"></div>
Just make sure to include WinJS, and then include the adapter.
<link href="winjs/css/ui-dark.css" rel="stylesheet" />
<script src="winjs/js/base.js"></script>
<script src="winjs/js/ui.js"></script>
<script src="js/knockout-winjs.js"></script>
Note: this adapter library has only been tested against Knockout 3.3+.
<!-- Shows up on the bottom of the screen, use right-click or touch edgy gesture to show -->
<div data-bind="winAppBar: {placement: 'bottom'}">
<button data-bind="winAppBarCommand: {label: 'AppBarButton', type: 'button', icon:'add'}"></button>
</div>
<div data-bind="winAutoSuggestBox"></div>
<!-- Won't show up unless you use WinJS.Navigation stack -->
<button data-bind="winBackButton"></button>
<div data-bind="winContentDialog"></div>
<div data-bind="winDatePicker: {current: date}"></div>
<div class="flipView" data-bind="winFlipView: {itemTemplate: templateName, itemDataSource: flipViewArray}"></div>
<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>
<button id="flyoutAnchor">Show a flyout!</button>
<div data-bind="winFlyout: {anchor: '#flyoutAnchor', placement: 'right'}">
<div>This is a flyout</div>
</div>
<div class="hub" data-bind="winHub">
<div class="hubSection" data-bind="winHubSection: {header: 'Section1'}"></div>
<div class="hubSection" data-bind="winHubSection: {header: 'Section2'}"></div>
<div class="hubSection" data-bind="winHubSection: {header: 'Section3'}"></div>
</div>
<!-- shown here used within a ko foreach -->
<div data-bind="foreach: ratings">
<div class="item" data-bind="winItemContainer: {swipeBehavior: 'select', swipeOrientation: 'horizontal', selected: selected}">
<div class="content"><span>Person: </span><span data-bind="text: text"></span>
<span>Rating: </span><span data-bind="text: rating"></span>
<span>Selected: </span><span data-bind="text: selected"></span></div>
</div>
</div>
<div class="listView" data-bind="winListView: {itemTemplate: 'listViewItemTemplate', itemDataSource: listViewArray, layout: {type: WinJS.UI.GridLayout}}"></div>
<script type="text/html" id="listViewItemTemplate">
<div class="listViewItem">
<div>
<span>Name: </span><span data-bind="text: text"></span>
</div>
<div>
<span>Rating: </span><span data-bind="text: rating"></span>
</div>
</div>
</script>
<button id="menuAnchor">Show a menu!</button>
<div data-bind="winMenu: {anchor: '#menuAnchor', placement: 'right' }">
<button data-bind="winMenuCommand: {id: 'menu2', label: 'Menu2', type: 'button'}"></button>
<hr data-bind="winMenuCommand: {type: 'separator'}" />
<button data-bind="winMenuCommand: {id: 'menu3', label: 'Menu3', type: 'button'}"></button>
</div>
<div data-bind="winPivot, event: { itemanimationend: itemAnimationEndHandler }">
<div data-bind="winPivotItem: { header: 'Header1' }">Item1</div>
<div data-bind="winPivotItem: { header: 'Header2' }">Item2</div>
</div>
The current rating is: <span data-bind="text: userRating"></span><br/>
<div data-bind="winRating: {userRating: userRating}"></div>
<div data-bind="winSemanticZoom">
<div data-bind="winListView: { itemDataSource: zoomedInSource.dataSource, groupDataSource: zoomedInSource.groups.dataSource }"></div>
<div data-bind="winListView: { itemDataSource: zoomedOutSource.dataSource }"></div>
</div>
<div data-bind="winSplitView">
<div class="paneNode">
SplitView pane area
<button data-bind="winSplitViewCommand: {label: 'Home', icon: 'home', oninvoked: goToHome}"></button>
<button data-bind="winSplitViewCommand: {label: 'Settings', icon: 'settings', oninvoked: goToSettings}"></button>
</div>
<div class="aContentNode">Text for the SplitView content area</div>
<div class="anotherContentNode">More text for the SplitView content area</div>
</div>
<button data-bind="winSplitViewPaneToggle: { splitView: splitViewElement }"></button>
<div data-bind="winTimePicker: {current: time}"></div>
<div data-bind="winToggleSwitch: {checked: toggleValue, title: toggleTitle, labelOff: toggleLabelOff, labelOn: 'world'}"></div>
<div data-bind="winToolBar">
<button data-bind="winCommand"></button>
<button data-bind="winCommand"></button>
</div>
<div data-bind="winTooltip: {contentElement: '#tip', infotip: true}">
<div>Hover for infoTip</div>
</div>
<div style="display: none">
<div id="tip">
<div>Tooltip only allows one time binding of with contentElement:</div>
<div data-bind="text: toolTipContent"></div>
</div>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent