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

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

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

    view source

    print ?

    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）。
    www.it165.net
     

    view source

    print ?

    1. //script

    2. WinJS.Binding.optimizeBindingReferences = true;

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

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

    view source

    print ?

    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对象转换为绑定上下文。代码如下:
    
     

    view source

    print ?

    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元素中。以下为完整代码：
    
     

    view source

    print ?

    01. //script

    02. WinJS.Binding.optimizeBindingReferences = true;

    03.   

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

    05.            var timer = null;

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

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

    08.            var bindingStyle = WinJS.Binding.as(style);

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