WinJS.Binding.List object

Represents a list of objects that can be accessed by index or by a string key. Provides methods to search, sort, filter, and manipulate the data.

Syntax

var object = new WinJS.Binding.List(list, options);

Members

The List object has these types of members:

• Constructors
• Methods
• Properties

Constructors

The List object has these constructors.

Methods

The List object has these methods.

Properties

The List object has these properties.

Remarks

Use a List to create a bindable collection from an array of data. To use the List to provide data to a ListView or FlipView control, call the List object's itemDataSource to obtain an IListDataSource.

Examples

The following code shows how to connect a List to a ListView object. The DIV object displays the members of the list. Note that you must use the list's dataSource property to bind to the itemDataSource property of the ListView.

You can also connect a List to a FlipView object, which displays each member of the list separately. You can see how it works by changing data-win-control="WinJS.UI.ListView" to data-win-control="WinJS.UI.FlipView".

<div id="listDiv"  
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ itemDataSource : dataList.dataSource }">
</div>
<script type="text/javascript">

    var dataArray = [
        { name: "Marley", species: "dog" },
        { name: "Lola", species: "cat" },
        { name: "Leo", species: "dog" },
        { name: "Izzy", species: "cat" },
        { name: "Ziggy", species: "cat" },
        { name: "Ruby", species: "dog" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);
    WinJS.UI.processAll();
</script>

The next example creates a more complex ListView that uses item templates.

This first example creates an item template and a ListView.

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

The next example defines the data for the ListView in a separate JavaScript file. 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);

})();

For more information about using ListView and FlipView controls with List objects, see Quickstart: Adding a ListView and Quickstart: Adding a FlipView.

Requirements

See also

Quickstart: Adding a ListView

Quickstart: Adding a FlipView