Data Linking 给我们提供一个UI控件与数据或者对象连接的功能。这就意味着当控件被更新,数据对象也被更新。同样,数所对象更新,控件也会立即更新。(互相链接)
下面介绍两种链接方法:单向链接(One way Linking)与双向链接(Two way Linking)。
One way Linking,就是把UI控件与某个对象关联,当控件更新这个对象跟着更新。这样我们就可以方便的在C#后台事件中处理这些对象就行了,不用再去取UI控件值。
上代码 ;
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>data link</title>
</head>
<body>
<form action="" method="post">
姓名:<input type="text" value="" name="name" /><br/>
年龄:<input type="text" value="" name="age"/><br/>
班级:<input type="text" value="" name="class"/><br />
<input type="button" value=" 测试 " style="text-align:center" />
</form><br />
<div style="border:#999999 1px solid; width:500px; height:200px">
姓名:<span id="name"></span><br />
年龄:<span id="age"></span><br />
班级:<span id="class"></span>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.datalink.js"></script>
<script type="text/javascript">
var ob={};
$("form").link(ob);
$("div >span").link(ob,{
name:{
name:"name",
convertBack:function(value,source,target){
$(target).text(value)
}
},
age:{
name:"age",
convertBack:function(value,source,target){
$(target).text(value)
}
},
class:{
name:"class",
convertBack:function(value,source,target){
$(target).text(value)
}
}
});
$("form :button").click(function(){
var inputs =new Object();
inputs.vehicle = JSON.stringify(ob);
$.getJSON("data2.php",$("form").serialize(),function(data){
$.each(data,function(key,value){
$(ob).setField(key,value);
})
})
});
</script>