Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern
Dieser Inhalt ist in Ihrer Sprache leider nicht verfügbar. Im Folgenden finden Sie die englische Version.

FlipView.itemDataSource property

Applies to Windows and Windows Phone

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




© 2017 Microsoft