WinJS.UI.IListDataSource interface

Provides access to a data source and enables you to bind, change, add, remove, and move items in that data source.

IListDataSource is an interface. To create an IListDataSource, you create an object that implements this interface. For more info, see the Remarks section.

Members

The IListDataSource interface has these types of members:

• Events
• Methods

Events

The IListDataSource interface has these events.

Methods

The IListDataSource interface has these methods.

Remarks

A IListDataSource connects a control (such as a ListView) to an IListDataAdapter. The IListDataSource manipulates the IListDataAdapter, which does the work of actually manipulating and retrieving data.

The Windows Library for JavaScript provides several types of IListDataSource objects that you can use:

• You can use a List to create an IListDataSource from an array of data by calling the List object's dataSource property.
• You can use a StorageDataSource to access information about files and directories.

You can also create your own custom data source that connects to some other type of data provider, such as a web service or database. For instructions, see How to create a custom data source.

Examples

This example creates a List ("itemList") from an array of items. Then it uses the WinJS.Namespace.define method to publicly expose the List as a part of the "DataExample" namespace.

For the ListView to access the data, add a reference to the JavaScript file to the HTML page that contains the ListView.

// data.js
(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var itemList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: itemList
        };
    WinJS.Namespace.define("DataExample", publicMembers);

})();

The next example creates an item template and a ListView. Because itemList is a List and not an IListDataSource, it uses the itemList object's dataSource property to retrieve an IListDataSource version of the List:

itemDataSource : DataExample.itemList.dataSource

Here's the full code:

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div style="width: 282px; height: 70px; padding: 5px; overflow: hidden; display: -ms-grid;">

        <!-- Displays the "picture" field. -->
        <img data-win-bind="alt: title; src: picture"
            src="#"
            style="width: 60px; height: 60px; margin: 5px; -ms-grid-column: 1;" />
        <div style="margin: 5px; -ms-grid-column: 2">

            <!-- Displays the "title" field. -->
            <h4 data-win-bind="innerText: title"></h4>

            <!-- Displays the "text" field. -->
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<div id="basicListView" data-win-control="WinJS.UI.ListView"
    data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
    itemTemplate: select('#mediumListIconTextTemplate'),
    layout : {type: WinJS.UI.GridLayout}}">
</div>

For a full walkthrough of the code and more info about creating your first ListView, see Quickstart: Add a ListView.

Requirements

See also

List

StorageDataSource

VirtualizedDataSource

How to create a custom data source

Quickstart: Add a ListView

HTML ListView item templates sample

HTML ListView working with data sources sample