Data binding в WinJS

Data binding - это процесс в котором вы связываете интерфейс приложения с бизнес-логикой. Бизнес-объекты со свойствами являются частью бизнес-логики приложения.

Пространство имен WinJS.Binding предоставляет метод processAll(), который связывает значение объекта со значением DOM-элемента.

default.js
(function() {
    "use strict";
    //create a person object
    var person = {
        name: "John Doe",
        age: 36,
        designation: "Technical Evangelist",
        city: "Boston",
    };
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    app.onactivated = function(args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.
            ApplicationExecutionState.terminated) {} else {}
            args.setPromise(WinJS.UI.processAll());
        }
    };
    app.oncheckpoint = function(args) {};
    app.start();
})();

Содержимое <body> в файле default.html
<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>
</div>

Добавим data binding:
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);
    }
};


Теги: