最近一直在看win8应用商店应用的开发,对于web开发者来说,可以用JavaScript+html+css来开发应用着实是个好消息。但是经过这些天的学习,发现还是有很多令人纠结的地方,再此写一些小心得,希望开发者有些帮助。
我们先来看一下这段代码。
- <style>
- #div1
- {
- width:100px;
- height:100px;
- background:black;
- }
- </style>
- <script>
- window.onload = function(){
- var timer = null;
- var div1 = document.getElementById('div1');
- var colorArray = ["blcak","red","pink","yellow","green","blue","orange"];
- var sizeArray = ["30","50","70","80","90","100","110"];
- var randomFuc = function(){
- var random = Math.floor(Math.random()*7);
- return random;
- }
- var timer = setInterval(function(){
- div1.style.background= colorArray[randomFuc()];
- div1.style.width= sizeArray[randomFuc()]+'px';
- div1.style.height= sizeArray[randomFuc()]+'px';
- },1000)
- }
- </script>
- <div id="div1"></div>
当然,这是一段在网页上随处可见的代码,很简单的一个div,,每隔一秒钟会变一次颜色以及宽高。
但是就是这么很简单的一个变换效果,如果想在win8的应用中使用,却不符合要求。接下来我们就来看一下,
在win8中如何实现这种效果。
- <div id="div1" data-win-bind="style.background:background;
- style.width:width;style.height:height">
- </div>
以上的代码是将div1绑定到一个对象上,div1的样式中的background对应这个对象的background,width与height
也是一一对应。接下来就是这个对象的声明。需要注意的是,一定要将WinJS.Binding.optimizeBindingReferences的
属性设置为true(在创建模版的时候,default.js中会自动将其设置为true)。
- //script
- WinJS.Binding.optimizeBindingReferences = true;
- var style = { background: 'white', width: '100px', height: '100px' }
style中属性的值均为程序启动时的默认属性(为什么将background设置为白色呢?因为我选的metro风格
的背景是黑色的。。)
- //script
- WinJS.Binding.optimizeBindingReferences = true;
- var style = { background: 'white', width: '100px', height: '100px' }
- var div1 = document.getElementById('div1');
- WinJS.Binding.processAll(div1, style);
必须调用WinJS.Binding.processAll才能显示这个div,这个函数的作用是从div1元素开始查找到data-win-bind
的属性,并搜索该元素所有的后代。这是进行本地测试,可以看到一个白色的长和宽均为100px的正方形。
该绑定是一次性的绑定,当更改style的属性时,div1并不会变化。我们必须使用WinJS.Binding.as将style对象转换为
绑定上下文。代码如下:
- WinJS.Binding.optimizeBindingReferences = true;
- var style = { background: 'white', width: '100px', height: '100px' }
- var div1 = document.getElementById('div1');
- WinJS.Binding.processAll(div1, style);
- var bindingStyle = WinJS.Binding.as(style);
bindingStyle对象是style对象的可观察到的表达形式,对bindingStyle的修改会显示到期绑定的html元素中。
以下为完整代码:
- //script
- WinJS.Binding.optimizeBindingReferences = true;
- var style = { background: 'white', width: '100px', height: '100px' }
- var timer = null;
- var div1 = document.getElementById('div1');
- WinJS.Binding.processAll(div1, style);
- var bindingStyle = WinJS.Binding.as(style);
- var colorArray = new Array("white", "red", "pink", "yellow", "green", "blue", "orange");
- var sizeArray = new Array("30", "50", "70", "80", "90", "100", "110");
- var randomFuc = function () {
- var random = Math.floor(Math.random() * 7);
- return random;
- }
- timer = setInterval(function () {
- bindingStyle.background = colorArray[randomFuc()];
- bindingStyle.width = sizeArray[randomFuc()] + 'px';
- bindingStyle.height = sizeArray[randomFuc()] + 'px';
- }, 1000)
再次运行程序,我们会发现,效果和之前网页的一样~
这就是binding的简单应用,但是只能绑定对象的简单属性,如果绑定的时数组,这个方法就失效了,
关于绑定复杂对象的介绍会在下次写出。