win8_绑定数据和样式（使用 J…

http://msdn.microsoft.com/zh-cn/library/windows/apps/hh700358.aspx

可以将数据和样式绑定到 HTML 元素，方法是使用 Windows JavaScript 库绑定。默认情况下，使用 Windows JavaScript 库绑定是单向的，这意味着当数据和样式值改变时会更新 HTML 元素，但当 HTML 元素改变时不会更新数据。此快速入门介绍绑定的最基本类型，该绑定是与仅包含数据的简单对象的声明性绑定。有关绑定的更高级类型的信息，请参阅如何绑定复杂对象和如何使用模板绑定数据。

要点  当你执行声明的绑定时，你应该在你的应用的启运过程中始终将WinJS.Binding.optimizeBindingReferences 属性设置为 true。如果你不这样做，你的应用中的绑定可能会泄漏内存。

先决条件

本主题假定你可以使用 JavaScript 创建为 Windows 构建的基本 Windows 应用商店应用。有关创建第一个应用的说明，请参阅创建第一个采用 JavaScript 的 Windows 应用商店应用。

设置绑定项目

若要设置项目以使用绑定，请完成以下步骤。

1. 使用 JavaScript 创建空白 Windows 应用商店应用并将其命名为 BindingApp。

2. 在 default.html 中，使用此 HTML 替换模板 HTML。

   HTML

   DOCTYPE html> <</span>html> <</span>head> <</span>meta charset="utf-8" /><</span>title>BindingApp</</span>title> <</span>linkhref="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet"> <</span>scriptsrc="//Microsoft.WinJS.1.0/js/base.js"></</span>script> <</span>scriptsrc="//Microsoft.WinJS.1.0/js/ui.js"></</span>script> <</span>link rel="stylesheet"href="/css/default.css" /> <</span>script src="/js/default.js"></</span>script></</span>head> <</span>body></</span>body> </</span>html>
   

3. 在你的启动过程中将 WinJS.Binding.optimizeBindingReferences 属性设置为 true。在这种情况下，你可以将该属性添加到你的项目中的 default.js 文件的开头。

   JavaScript

   (function () { "use strict"; WinJS.Binding.optimizeBindingReferences = true; ... }
   

4. 添加用于绑定的 DIV 元素并为其提供 ID“basicBinding”和嵌入式文本 Welcome，如此处所示。

   HTML

   <</span>body> <</span>div id="basicBinding"> Welcome </</span>div> </</span>body>
   

绑定数据

可以将任何类型的数据绑定到 HTML 元素，但是对于说明用途，我们仅设置具有第一个名称的字段的person 对象。

警告  不要试图将数据绑定到 HTML 元素的 ID。

1. 将 SCRIPT 元素添加到 default.html 文件正文的 DIV 元素后面。绑定代码必须出现在它绑定到的元素后面（在本示例中为将在下一步骤添加的 SPAN 元素）。

   HTML

   <</span>script type="text/javascript"> var person = { name: "Fran" };</</span>script>
   

2. 在 DIV 元素内，添加访问 person.name 字段的 SPAN 元素。

   HTML

   <</span>div id="basicBinding"> Welcome, <</span>span id="nameSpan" data-win-bind="innerText: name"></</span>span> </</span>div>
   

3. 必须调用 WinJS.Binding.processAll 才能显示名称。WinJS.Binding.processAll 开始在指定元素查找 data-win-bind 属性，然后搜索该元素的所有后代。

   HTML

   <</span>script type="text/javascript"> var person = { name: "Fran" }; var personDiv = document.getElementByIdx_x_x("nameSpan"); WinJS.Binding.processAll(personDiv, person);</</span>script>
   

4. 构建并调试项目时，应看到以下内容：

   Welcome, Fran（欢迎你，弗兰）

5. 该绑定仅为一次性绑定，这表示数据更改时文本不会更改。JavaScript 对象本身无法在应用程序更改时通知该应用程序，但你可以通过使用 WinJS.Binding.as 将该对象转换为绑定上下文。在WinJS.Binding.processAll 调用之后添加以下代码行。

   JavaScript

   bindingSource 对象是 person 对象的可观察到的表示形式，因此对 bindingSource 所进行的更改可能会显示在绑定的 HTML 元素中。

6. 若要演示基本数据更改时所出现的情况，我们仅使用按钮来模拟从其他进程或从内部数据存储中获取数据。添加 BUTTON 元素，与此类似。

   HTML

   <</span>button id="btnGetName">Get name</</span>button>
   

7. 添加模拟获取数据的 mock 方法。在此情形中，我们通过使用随机化索引从数组中获取名称。使用以下代码处理按钮的单击事件。

   JavaScript

   var btn = document.getElementByIdx_x_x("btnGetName").onclick = function () { getName(bindingSource, nameArray); } var nameArray = new Array("Sally","Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam");function getName(source, nameArray) { source.name = nameArray[randomizeValue()]; } function randomizeValue() { var value = Math.floor((Math.random() * 1000) % 8); if (value < 0) value = 0; else if(value > 9) value = 9; return value; }
   

8. 若要测试此代码，请构建并调试应用程序。应在每次单击“获取名称”按钮时看到不同的名称。

绑定样式

现在我们将绑定 SPAN 元素的背景颜色。

1. 将颜色字段添加至 Person 对象。

   JavaScript

   var person = { name: "Fran", color: "red" };
   

2. 将 style.background 值添加到 data-win-bind 属性，并将其绑定设置为 Person 对象的颜色字段。

   HTML

   <</span>div id="basicBinding"> Welcome, <</span>span id="nameSpan" data-win-bind="innerHTML: name; style.background: color"></</span>span> </</span>div>
   

3. 添加另一颜色数组并更改 getName 函数，以便该函数更新名称颜色。

   JavaScript

   var colorArray = new Array("lime", "lavender", "yellow", "orange", "pink","greenyellow", "white", "lightblue","lightgreen", "lightyellow"); functiongetName(source, nameArray, colorArray) { source.name = nameArray[randomizeValue()]; source.color = colorArray[randomizeValue()]; }
   

4. 请勿忘记在单击事件处理程序中更改 getName 调用。

   JavaScript

   var btn = document.getElementByIdx_x_x("btnGetName").onclick = function () { getName(bindingSource, nameArray, colorArray); }
   

5. 构建和调试应用时，应看到单击“获取名称”按钮会更新名称和名称颜色。

   
   

   /default.js///

    

   // For an introduction to the Blank template, see the following documentation:

   // http://go.microsoft.com/fwlink/?LinkId=232509

   (function () {

       "use strict";

   
   

       WinJS.Binding.optimizeBindingReferences = true;

   
   

       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) {

                   // TODO: This application has been newly launched. Initialize

                   // your application here.

               } else {

                   // TODO: This application has been reactivated from suspension.

                   // Restore application state here.

               }

               args.setPromise(WinJS.UI.processAll());

           }

   
   

   
   

           var btn = document.getElementByIdx_x_x("btnGetName").onclick = function () {

               getName(bindingSource, nameArray, colorArray);

           }

           var nameArray =

               new Array("Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam");

           var colorArray =

               new Array("lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue", "lightgreen", "lightyellow");

   
   

           function getName(source, nameArray, colorArray) {

               source.name = nameArray[randomizeValue()];

               source.color = colorArray[randomizeValue()];

           }

   
   

   
   

           function randomizeValue() {

               var value = Math.floor((Math.random() * 1000) % 8);

               if (value < 0)

                   value = 0;

               else if (value > 9)

                   value = 9;

               return value;

           }

   
   

   
   

       };

   
   

       app.oncheckpoint = function (args) {

           // TODO: This application is about to be suspended. Save any state

           // that needs to persist across suspensions here. You might use the

           // WinJS.Application.sessionState object, which is automatically

           // saved and restored across suspension. If you need to complete an

           // asynchronous operation before your application is suspended, call

           // args.setPromise().

       };

   
   

       app.start();

   })();

   //default.html
     <!DOCTYPE html>

   <html>

   <head>

       <meta charset="utf-8" />

       <title>App1</title>

   
   

       <!-- WinJS references -->

       <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

       <script src="//Microsoft.WinJS.1.0/js/base.js"></script>

       <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

   
   

       <!-- App1 references -->

       <link rel="stylesheet" href="/css/default.css" />

       <script src="/js/default.js"></script>

   </head>

   <body>

       <div id="basicBinding">

         Welcome,

           <span id="nameSpan" data-win-bind="innerText: name; style.background: color"></span>

       </div>

       <script type="text/javascript">

           var person = { name: "Fran", color: "red" };

           var personDiv = document.getElementByIdx_x("nameSpan");

           WinJS.Binding.processAll(personDiv, person);

           var bindingSource = WinJS.Binding.as(person);

       </script>

       <button id="btnGetName">Get name</button>

   
   

   </body>

   </html>