Связывание данных с WinJS-компонентами


data.js
(function() {
    var flavors = [{
        title: "Basic banana",
        text: "Low-fat frozen yogurt"
    }, {
        title: "Banana blast",
        text: "Ice cream"
    }, {
        title: "Brilliant banana",
        text: "Frozen custard"
    }, {
        title: "Orange surprise",
        text: "Sherbet"
    }, {
        title: "Original orange",
        text: "Sherbet"
    }, {
        title: "Vanilla",
        text: "Ice cream"
    }, {
        title: "Very vanilla",
        text: "Frozen custard"
    }, {
        title: "Marvelous mint",
        text: "Gelato"
    }, {
        title: "Succulent strawberry",
        text: "Sorbet"
    }];
    var flavorList = new WinJS.Binding.List(flavors);
    WinJS.Namespace.define("DataExample", {
        flavorList: flavorList
    });
})();



Добавьте ссылку на data.js в default.html:
<head>
   <!-- Other file references ... -->
   <!-- Your data file. -->
   <script src="/js/data.js"></script>
</head>

default.html
<h1>ListView Data Binding</h1>
<div id="flavorItemTemplate" data-win-control="WinJS.Binding.Template">
   <div id="templateContainer">
      <div id="itemContainer">
         <h4 data-win-bind="innerText: title"></h4>
         <h6 data-win-bind="innerText: text"></h6>
      </div>
   </div>
</div>
<div id="basicListView" data-win-control="WinJS.UI.ListView"
   data-win-options="{itemDataSource : DataExample.flavorList.dataSource,
   itemTemplate:select('#flavorItemTemplate'),
   selectionMode: 'none',
   layout:{type:WinJS.UI.ListLayout}}"></div>

default.css
#basicListView{
 height: 100%;
 margin-top: 10px;
 margin-right: 20px;
}

#templateContainer{
 display: -ms-grid;
-ms-grid-columns: 1fr;
min-height: 150px;
}

#itemContainer{
 background-color:lightgray;
 width:100%;
 padding:10px;
}


Теги: