The current rating is: <span data-bind="text: userRating"></span><br/>
<div data-bind="winRating: {userRating: userRating}"></div>

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<script src="/js/knockout-winjs.js"></script>

<!-- 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>

<!-- Won't show up unless you use WinJS.Navigation stack -->
<button data-bind="winBackButton"></button>

<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>&nbsp;
    <span>Rating: </span><span data-bind="text: rating"></span>&nbsp;
    <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>

<!-- Shows up on the top of the screen, use right-click or touch edgy gesture to show -->
<div data-bind="winNavBar">
  <div data-bind="winNavBarContainer">
    <div data-bind="winNavBarCommand: {label: 'Navigation Item', icon: 'add'}"></div>
  </div>
</div>

The current rating is: <span data-bind="text: userRating"></span><br/>
<div data-bind="winRating: {userRating: userRating}"></div>

<div data-bind="winSearchBox"></div>

<div data-bind="winTimePicker: {current: time}"></div>

<div data-bind="winToggleSwitch: {checked: toggleValue, title: toggleTitle, labelOff: toggleLabelOff, labelOn: 'world'}"></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>