FlipView.itemDataSource property

Gets or sets the data source that provides the FlipView with items to display. The FlipView displays one item at a time, on its own page.


<div data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : value}" />
var itemDataSource = flipView.itemDataSource;
flipView.itemDataSource = itemDataSource;

Property value

Type: IListDataSource**

An IListDataSource that contains the items to display in the FlipView.


Use the itemTemplate property to specify how each item displays.


This example shows one way to define data for a FlipView. It uses a WinJS.Binding.List to create a data source from JSON data. The example defines this data in a JavaScript file named defaultData.js.

(function () {
    "use strict";

    var array = [
        { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
        { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
        { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
        { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
        { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    var bindingList = new WinJS.Binding.List(array);

    WinJS.Namespace.define("DefaultData", {
        bindingList: bindingList,
        array: array

    var e = DefaultData.bindingList.dataSource;

Notice that the example makes the data publicly available by exposing it in a namespace. Otherwise, the FlipView wouldn't be able to access the data.

WinJS.Namespace.define("DefaultData", {
    bindingList: bindingList,
    array: array

The next example shows the markup for a FlipView that uses the data.

<div id="simple_ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="overlaidItemTemplate">
        <img class="image" src="#" data-win-bind="src: picture; alt: title" />
        <div class="overlay">
            <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>

<div id="simple_FlipView"
    data-win-options="{ itemDataSource: DefaultData.bindingList.dataSource, itemTemplate: select('#simple_ItemTemplate') }">

The next example creates a CSS style for the FlipView that sets its height and width. Include this CSS in the CSS style sheet for your HTML page.

#simple_FlipView {
    width: 480px;
    height: 270px;
    border: solid 1px black;
    background-image: url("/images/texture.png");

For step-by-step instructions, see Quickstart: Adding a FlipView. For more info about the different types of data sources you can use, see IListDataSource.


Minimum WinJS version

WinJS 3.0



See also