Использование шаблонов для связывания данных в WinJS


default.js
(function() {
    "use strict";
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });
    //other app code ...
})();


default.html
<h1>Data Binding Template</h1>
<div id="templateDiv" data-win-control="WinJS.Binding.Template">
   <div class="templateItem" data-win-bind="style.background: color"
      style="color:white">
      <ol>
         <li><span>Name :</span><span data-win-bind="textContent: name"></
            span>
         </li>
         <li><span>Birthday:</span><span data-win-bind="textContent:
            birthday"></span></li>
         <li><span>Pet's name: </span><span data-win-bind="textContent:
            petname"></span></li>
         <li><span>Dessert: </span><span data-win-bind="textContent:
            dessert"></span></li>
      </ol>
   </div>
</div>
<div id="renderDiv"></div>

Добавим следующий выпадающий список после элемента renderDiv:
<fieldset id="templateControlObject">
   <legend>Pick a name:</legend>
   <select id="templateControlObjectSelector">
      <option value="0">Show John Doe</option>
      <option value="1">Show Jane Dow</option>
      <option value="2">Show Jake Doe</option>
   </select>
</fieldset>

В default.js создадим массив:
(function() {
    "use strict";
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    })
    var people = [
    new Person({
        name: "John Doe",
        color: "red",
        birthday: "2/2/2002",
        petname: "Spot",
        dessert: "chocolate cake"
    }),
    new Person({
        name: "Jane Doe",
        color: "green",
        birthday: "3/3/2003",
        petname: "Xena",
        dessert: "cherry pie"
    }),
    new Person({
        name: "Jake Doe",
        color: "blue",
        birthday: "2/2/2002",
        petname: "Pablo",
        dessert: "ice cream"
    }), ];
    //Other app code ...
})();

Далее в default.js добавим обработчик события для выпадающего списка:
app.onactivated = function(args) {
    // Other activation code ...
    var selector = document.querySelector("#templateControlObjectSelector");
    selector.addEventListener("change", handleChange, false);
    args.setPromise(WinJS.UI.processAll());
}


(function() {
    //Other app code...
    function handleChange(evt) {
        var templateElement = document.querySelector("#templateDiv");
        var renderElement = document.querySelector("#renderDiv");
        renderElement.innerHTML = "";
        var selected = evt.target.selectedIndex;
        var templateControl = templateElement.winControl;
        templateElement.winControl.render(people[selected], renderElement);
    }
})();


Теги: