Windows 8应用开发入门之binding(绑定)
- 发布日期:2012-10-24 10:03:10
-
-
-
最近一直在看win8应用商店应用的开发,对于web开发者来说,可以用JavaScript+html+css来开发应用着实是个好消息。但是经过这些天的学习,发现还是有很多令人纠结的地方,再此写一些小心得,希望开发者有些帮助。
我们先来看一下这段代码。
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中如何实现这种效果。
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
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元素中。以下为完整代码:
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的简单应用,但是只能绑定对象的简单属性,如果绑定的时数组,这个方法就失效了,关于绑定复杂对象的介绍会在下次写出。
-