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.

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

Minimum supported client

Windows 8 [Windows Store apps only]

Minimum supported server

Windows Server 2012 [Windows Store apps only]

Minimum supported phone

Windows Phone 8.1

Namespace

WinJS.UI

Library

Winjs.js

See also

FlipView
IListDataSource
itemTemplate

 

 

Show:
© 2015 Microsoft