jquery Data Linking

来源：互联网发布：服务器性能监测软件编辑：程序博客网时间：2024/05/21 18:09

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>