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 应用商店应用。

设置绑定项目

若要设置项目以使用绑定，请完成以下步骤。使用 JavaScript 创建空白 Windows
应用商店应用并将其命名为 BindingApp。在 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>

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

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

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

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

绑定数据

可以将任何类型的数据绑定到 HTML
元素，但是对于说明用途，我们仅设置具有第一个名称的字段的person 对象。警告  不要试图将数据绑定到
HTML 元素的 ID。将 SCRIPT 元素添加到 default.html 文件正文的 DIV
元素后面。绑定代码必须出现在它绑定到的元素后面（在本示例中为将在下一步骤添加的 SPAN 元素）。HTML

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

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

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

必须调用 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>

构建并调试项目时，应看到以下内容：Welcome, Fran（欢迎你，弗兰）该绑定仅为一次性绑定，这表示数据更改时文本不会更改。JavaScript
对象本身无法在应用程序更改时通知该应用程序，但你可以通过使用 WinJS.Binding.as 将该对象转换为绑定上下文。在WinJS.Binding.processAll 调用之后添加以下代码行。JavaScript

bindingSource 对象是 person 对象的可观察到的表示形式，因此对 bindingSource 所进行的更改可能会显示在绑定的
HTML 元素中。若要演示基本数据更改时所出现的情况，我们仅使用按钮来模拟从其他进程或从内部数据存储中获取数据。添加 BUTTON
元素，与此类似。HTML

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

添加模拟获取数据的 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; }

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

绑定样式

现在我们将绑定 SPAN 元素的背景颜色。将颜色字段添加至 Person 对象。JavaScript

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

将 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>

添加另一颜色数组并更改 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()]; }

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

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

构建和调试应用时，应看到单击“获取名称”按钮会更新名称和名称颜色。/////////////////////////////////////////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>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////