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.

Syntax

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

Remarks

Use the itemTemplate property to specify how each item displays.

Examples

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>
    </div>
</div>

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

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.

Requirements

See also

FlipView

IListDataSource

itemTemplate