Windows 8应用开发入门之binding(绑定)

发布日期：2012-10-24 10:03:10   

• 我来说两句(0)

• -

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

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

  
   

  view source

  print?

  01.<style>

  02.    #div1

  03.    {

  04.        width:100px;

  05.        height:100px;

  06.        background:black;

  07.    }

  08.</style>

  09.<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.<divid="div1"></div>

  
  当然，这是一段在网页上随处可见的代码，很简单的一个div，，每隔一秒钟会变一次颜色以及宽高。但是就是这么很简单的一个变换效果，如果想在win8的应用中使用，却不符合要求。接下来我们就来看一下，在win8中如何实现这种效果。
  
   

  view source

  print?

  1.<divid="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）。
  www.it165.net
   

  view source

  print?

  1.//script

  2.WinJS.Binding.optimizeBindingReferences =true;

  3.varstyle = { background: 'white', width:'100px', height: '100px'}

  style中属性的值均为程序启动时的默认属性（为什么将background设置为白色呢？因为我选的metro风格的背景是黑色的。。）
  
   

  view source

  print?

  1.//script

  2.WinJS.Binding.optimizeBindingReferences =true;

  3.varstyle = { background: 'white', width:'100px', height: '100px'}

  4.vardiv1 = document.getElementById('div1');

  5.WinJS.Binding.processAll(div1, style);

  
  必须调用WinJS.Binding.processAll才能显示这个div，这个函数的作用是从div1元素开始查找到data-win-bind的属性，并搜索该元素所有的后代。这是进行本地测试，可以看到一个白色的长和宽均为100px的正方形。该绑定是一次性的绑定，当更改style的属性时，div1并不会变化。我们必须使用WinJS.Binding.as将style对象转换为绑定上下文。代码如下:
  
   

  view source

  print?

  1.WinJS.Binding.optimizeBindingReferences =true;

  2.  

  3. varstyle = { background: 'white', width:'100px', height: '100px'}

  4. vardiv1 = document.getElementById('div1');

  5. WinJS.Binding.processAll(div1, style);

  6. varbindingStyle = WinJS.Binding.as(style);

  
  bindingStyle对象是style对象的可观察到的表达形式，对bindingStyle的修改会显示到期绑定的html元素中。以下为完整代码：
  
   

  view source

  print?

  01.//script

  02.WinJS.Binding.optimizeBindingReferences =true;

  03.  

  04.           varstyle = { background: 'white', width:'100px', height: '100px'}

  05.           vartimer = null;

  06.           vardiv1 = document.getElementById('div1');

  07.           WinJS.Binding.processAll(div1, style);

  08.           varbindingStyle = WinJS.Binding.as(style);

  09.           varcolorArray = new Array("white", "red","pink", "yellow","green", "blue","orange");

  10.           varsizeArray = new Array("30", "50","70", "80","90", "100","110");

  11.           varrandomFuc = function () {

  12.               varrandom = Math.floor(Math.random() * 7);

  13.               returnrandom;

  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的简单应用，但是只能绑定对象的简单属性，如果绑定的时数组，这个方法就失效了，关于绑定复杂对象的介绍会在下次写出。