雪湖小札@blogjava

心情与技术文档同行 http://hi.baidu.com/jingleq
BlogJava 首页 新随笔 联系 聚合 管理
  24 Posts :: 2 Stories :: 4 Comments :: 0 Trackbacks
征服javascript(四)-旧标签新属性(页面数据分离与数据转化处理)

 　　今天才发现原来html的基本标签里面的属性是可以由我们自己随意添加的，而且通过DOM方式还能够访问到。这一功能可以做很多事情。
　　这里我做的就是数据分离，这是用好ajax的前提条件。实现中，通过在span标签中添加上bindingData属性和bindingPattern属性来指明数据和数据转化逻辑。通过javascript处理填入数据内容。
　　当然要处理javascript代码，使用了jquery，jquery在操作DOM对象的时候带来很大的便利。另外jquery在ajax与数据展示特效中都有出色的表现。后面会再有详细说明。
　　整个程序如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>HelloWorld</title>
   <script src="lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
  
   // --- 基本数据区 ---
   var dataMap = {"name":"0001","password":"123456"};
   var userMap = {"0001":"jingle","0002":"chen"}
   // --- end ---  

   // --- 基本数据格式转换逻辑区 --- 
   function changeName(val) {
    return userMap[val];
   }
   // --- end ---
  
   // --- 数据绑定 ---
   $(document).ready(function (){
    $("span").each(function (i,n) {
     if (n.bindingPattern != undefined || n.bindingPattern == "") {
      try {
       n.bindingPattern = n.bindingPattern.replace("[function]","");
       // --- 调用处理方法 ---
       //当然可以在这里加强，不止只有一个参数
       n.innerHTML = eval(n.bindingPattern.replace("\{0\}","'" + dataMap[n.bindingData] + "'"));
      } catch (e) {
       alert(e);
      }
     } else {
      n.innerHTML = dataMap[n.bindingData];
     }
    })
   })
   // --- end ---

   </script>
</head>
<body>
   <div id="head">HelloWOrld</div>
   <hr/>
   <div id="conent"> 
    <!-- 这样写在html区域代码清晰明了 -->
    <table border="0" cellspacing="5" cellpadding="5">
     <tr>
          <td><span bindingData="name" bindingPattern="[function] changeName({0})"></span></td>
     </tr>
     <tr>
          <td><span bindingData="password"></span></td>
     </tr>
    </table>
   </div>
</body>
</html>

 

 

 

posted on 2007-06-13 08:17 csnowfox 阅读(493) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航: