WinJS-компоненты Repeater и ItemContainer


default.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Recipe4.1</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>
      <link href="/css/default.css" rel="stylesheet" />
      <script src="/js/default.js"></script>
      <script src="/js/data.js"></script>
   </head>
   <body style="margin:20px">
      <h1>Recipe 4.1</h1>
      <table>
         <thead>
            <tr>
               <th> Employee ID</th>
               <th> Employee Name</th>
               <th> Employee Designation</th>
            </tr>
         </thead>
         <tbody id="repeaterData" data-win-control="WinJS.UI.Repeater">
            <tr>
               <td data-win-bind="textContent:id"></td>
               <td data-win-bind="textContent:name"></td>
               <td data-win-bind="textContent:designation"></td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

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

    function Initialize() {
        WinJS.UI.processAll().done(function() {
            var repeaterControl1 = document.getElementById('repeaterData').winControl;
            var Employees = new WinJS.Binding.List([{
                id: 1,
                name: "Senthil Kumar",
                designation: "Mobile Developer"
            }, {
                id: 2,
                name: "Lohith GN",
                designation: "Web Developer"
            }, {
                id: 3,
                name: "Vidyasagar",
                designation: "Game Developer"
            }]);
            repeaterControl1.data = Employees;
        })
    }
    document.addEventListener("DOMContentLoaded", Initialize);
})();

Для того чтобы элементы можно было выделять нужно использовать компонент ItemContainer:
<div id="repeaterData" data-win-control="WinJS.UI.Repeater">
   <div data-win-control="WinJS.UI.ItemContainer" data-win-bind="dataset.name:name">
      <div data-win-bind="textContent:name"></div>
   </div>
</div>


(function() {
    "use strict";

    function Initialize() {
        WinJS.UI.processAll().done(function() {
            var repeaterControl1 = document.getElementById('repeaterData').winControl;
            var Employees = new WinJS.Binding.List([{
                id: 1,
                name: "Senthil Kumar",
                designation: "Mobile Developer"
            }, {
                id: 2,
                name: "Lohith GN",
                designation: "Web Developer"
            }, {
                id: 3,
                name: "Vidyasagar",
                designation: "Game Developer"
            }]);
            repeaterControl1.data = Employees;
            repeaterControl1.addEventListener("invoked", function(e) {
                var name = e.target.dataset.name;
                var message = new Windows.UI.Popups.MessageDialog(name);
                message.showAsync();
            })
        })
    }
    document.addEventListener("DOMContentLoaded", Initialize);
})();


Теги: