windows8应用开发入门之data-binding(数据绑定)

最近一直在看win8应用商店应用的开发，对于web开发者来说，可以用JavaScript+html+css来开发应用着实是个好消息。但是经过这些天的学习，发现还是有很多令人纠结的地方，再此写一些小心得，希望开发者有些帮助。

我们先来看一下这段代码。

 
  
  1. <style> 
  2.     #div1 
  3.     { 
  4.         width:100px; 
  5.         height:100px; 
  6.         background:black; 
  7.     } 
  8. </style> 
  9. <script> 
  10.     window.onload = function(){ 
  11.         var timer = null; 
  12.         var div1 = document.getElementById('div1'); 
  13.         var colorArray = ["blcak","red","pink","yellow","green","blue","orange"]; 
  14.         var sizeArray = ["30","50","70","80","90","100","110"]; 
  15.         var randomFuc = function(){ 
  16.             var random = Math.floor(Math.random()*7); 
  17.             return random; 
  18.         } 
  19.         var timer = setInterval(function(){ 
  20.             div1.style.background= colorArray[randomFuc()]; 
  21.             div1.style.width= sizeArray[randomFuc()]+'px'; 
  22.             div1.style.height= sizeArray[randomFuc()]+'px'; 
  23.         },1000) 
  24.         } 
  25. </script> 
  26. <div id="div1"></div> 
 
  
当然，这是一段在网页上随处可见的代码，很简单的一个div，，每隔一秒钟会变一次颜色以及宽高。
 
  
但是就是这么很简单的一个变换效果，如果想在win8的应用中使用，却不符合要求。接下来我们就来看一下，
 
  
在win8中如何实现这种效果。
 
  
 
  
  1. <div id="div1" data-win-bind="style.background:background;
  2. style.width:width;style.height:height">
  3. </div> 
 
  
以上的代码是将div1绑定到一个对象上，div1的样式中的background对应这个对象的background，width与height
 
  
也是一一对应。接下来就是这个对象的声明。需要注意的是，一定要将WinJS.Binding.optimizeBindingReferences的
 
  
属性设置为true（在创建模版的时候，default.js中会自动将其设置为true）。
 
  
 
  
  1. //script
  2. WinJS.Binding.optimizeBindingReferences = true; 
  3. var style = { background: 'white', width: '100px', height: '100px' } 
 
  
style中属性的值均为程序启动时的默认属性（为什么将background设置为白色呢？因为我选的metro风格
 
  
的背景是黑色的。。）
 
  
 
  
  1. //script 
  2. WinJS.Binding.optimizeBindingReferences = true; 
  3. var style = { background: 'white', width: '100px', height: '100px' } 
  4. var div1 = document.getElementById('div1'); 
  5. WinJS.Binding.processAll(div1, style); 
 
  
必须调用WinJS.Binding.processAll才能显示这个div，这个函数的作用是从div1元素开始查找到data-win-bind
 
  
的属性，并搜索该元素所有的后代。这是进行本地测试，可以看到一个白色的长和宽均为100px的正方形。
 
  
该绑定是一次性的绑定，当更改style的属性时，div1并不会变化。我们必须使用WinJS.Binding.as将style对象转换为
 
  
绑定上下文。代码如下:
 
  
 
  
  1. WinJS.Binding.optimizeBindingReferences = true; 
  2.  
  3.  var style = { background: 'white', width: '100px', height: '100px' } 
  4.  var div1 = document.getElementById('div1'); 
  5.  WinJS.Binding.processAll(div1, style); 
  6.  var bindingStyle = WinJS.Binding.as(style); 
 
  
bindingStyle对象是style对象的可观察到的表达形式，对bindingStyle的修改会显示到期绑定的html元素中。
 
  
以下为完整代码：
 
  
 
  
  1. //script
  2. WinJS.Binding.optimizeBindingReferences = true; 
  3.  
  4.            var style = { background: 'white', width: '100px', height: '100px' } 
  5.            var timer = null; 
  6.            var div1 = document.getElementById('div1'); 
  7.            WinJS.Binding.processAll(div1, style); 
  8.            var bindingStyle = WinJS.Binding.as(style); 
  9.            var colorArray = new Array("white", "red", "pink", "yellow", "green", "blue", "orange"); 
  10.            var sizeArray = new Array("30", "50", "70", "80", "90", "100", "110"); 
  11.            var randomFuc = function () { 
  12.                var random = Math.floor(Math.random() * 7); 
  13.                return random; 
  14.            } 
  15.  
  16.            timer = setInterval(function () { 
  17.                bindingStyle.background = colorArray[randomFuc()]; 
  18.                bindingStyle.width = sizeArray[randomFuc()] + 'px'; 
  19.                bindingStyle.height = sizeArray[randomFuc()] + 'px'; 
  20.            }, 1000) 
 
  
再次运行程序，我们会发现，效果和之前网页的一样~
 
  
这就是binding的简单应用，但是只能绑定对象的简单属性，如果绑定的时数组，这个方法就失效了，
 
  
关于绑定复杂对象的介绍会在下次写出。