HTML ListView item templates sample

This sample demonstrates how to use WinJS.Binding.Template objects and rendering functions to display items for a ListView . It also shows how to enable cell-spanning templates for variably sized items.

 
 
 
 
 
(4)
4,814 times
Add To Favorites
4/9/2013
E-mail Twitter del.icio.us Digg Facebook
Report Abuse to Microsoft

Solution Explorer

JavaScript
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="/css/scenario1.css" />
    <script src="/js/data.js"></script>
    <script src="/js/scenario1.js"></script>
</head>
<body>
    <div data-win-control="SdkSample.ScenarioInput">
        <!-- This sample shows simple scenarios for using the ListView control with in-memory data and
         declarative templates. These may not scale for larger sets of data or complex UI. See the
         HTML ListView Optimizing Performance http://go.microsoft.com/fwlink/?LinkId=247610 and
         HTML ListView Working with DataSources http://go.microsoft.com/fwlink/?LinkId=247609 samples
         for examples of custom datasources and render functions. -->
        <p>
            The Windows Library for JavaScript has a built-in templating engine that enables
            developers to easily create item templates, such as the one used in the ListView
            in this example. Many of the templates that Windows uses are provided on the Windows
            developer center so that you can copy and paste them into your own apps.
        </p>
        <br />
        <br />
    </div>
    <div data-win-control="SdkSample.ScenarioOutput">
        <div id="regularListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
            <div class="regularListIconTextItem">
                <img src="#" class="regularListIconTextItem-Image" data-win-bind="src: picture" />
                <div class="regularListIconTextItem-Detail">
                    <h4 data-win-bind="innerText: title"></h4>
                    <h6 data-win-bind="innerText: text"></h6>
                </div>
            </div>
        </div>

        <div id="listView" 
            class="win-selectionstylefilled"
            data-win-control="WinJS.UI.ListView" 
            data-win-options="{ 
                itemDataSource: myData.dataSource, 
                itemTemplate: regularListIconTextTemplate, 
                selectionMode: 'none', 
                tapBehavior: 'none', 
                swipeBehavior: 'none', 
                layout: { type: WinJS.UI.GridLayout } 
            }"
        ></div>
    </div>
</body>
</html>