Группировка элементов в WinJS-компоненте ListView



default.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Recipe4.5</title>
      <!-- WinJS references -->
      <link href="WinJS/css/ui-light.css" rel="stylesheet" />
      <script src="WinJS/js/base.js"></script>
      <script src="WinJS/js/ui.js"></script>
      <!-- Recipe4.5 references -->
      <link href="/css/default.css" rel="stylesheet" />
      <script src="/js/default.js"></script>
      <script src="/js/data.js"></script>
   </head>
   <body class="win-type-body">
      <h1>Recipe 4.5</h1>
      <div id="GroupHeader" data-win-control="WinJS.Binding.Template">
         <h3 data-win-bind="innerText: technology"></h3>
      </div>
      <div id="employee" data-win-control="WinJS.Binding.Template">
         <h4 data-win-bind="innerText:name"></h4>
      </div>
      <div id="lvEmployees" data-win-control="WinJS.UI.ListView"
         data-win-options="{
         itemTemplate: select('#employee'),
         groupHeaderTemplate: select('#GroupHeader')
         }">
      </div>
   </body>
</html>

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

    function Initialize() {
        WinJS.UI.processAll().done(function() {
            var listView1 = document.getElementById("lvEmployees").winControl;
            var employeeList = new WinJS.Binding.List([{
                id: 1,
                name: "Senthil Kumar",
                technology: "Mobile"
            }, {
                id: 2,
                name: "Michael",
                technology: "Web"
            }, {
                id: 3,
                name: "Lohith",
                technology: "Web"
            }, {
                id: 4,
                name: "Stephen",
                technology: "Mobile"
            }, {
                id: 5,
                name: "Vidyasagar",
                technology: "Game"
            }, {
                id: 6,
                name: "Joseph",
                technology: "Mobile"
            }, ]);
            var groupedEmployees = employeeList.createGrouped(

            function(item) {
                return item.technology;
            },

            function(item) {
                return {
                    technology: item.technology
                }
            },

            function(group1, group2) {
                return group1 > group2 ? 1 : -1;
            });
            listView1.groupDataSource = groupedEmployees.groups.dataSource;
            listView1.itemDataSource = groupedEmployees.dataSource;
        });
    }
    document.addEventListener("DOMContentLoaded", Initialize);
})();

Теги: