Data binding CSS-свойств в WinJS


js/default.js
(function() {
    "use strict";
    //create person object
    var person = {
        name: "John Doe",
        age: 36,
        designation: "Technical Evangelist",
        city: "Boston",
        favcolor: "orange"
    };
    //Other app set-up code
})();


default.html
<h1>Data Bind Attributes</h1>
<br />
<div id="container">
   <h3>Name:</h3>
   <h2><span data-win-bind="innerText: name"></span></h2>
   <h3>Age:</h3>
   <h2><span data-win-bind="innerText: age"></span></h2>
   <h3>Designation:</h3>
   <h2><span data-win-bind="innerText: designation"></span></h2>
   <h3>City:</h3>
   <h2><span data-win-bind="innerText: city"></span> </h2>
   <h3>Fav Color:</h3>
   <div data-win-bind="style.background: favcolor" >
      <div class="favcolor" data-win-bind="innerText: favcolor"></div>
   </div>
</div>

Модифицируем метод onactivated в файле js/default.js:
app.onactivated = function(args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.
        ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        var container = document.querySelector("#container");
        var prmise = WinJS.UI.processAll().then(function() {
            WinJS.Binding.processAll(container, person)
        })
        args.setPromise(prmise);
    }
};


Теги: