liuzidong 发表于 2013-1-23 02:08:35

Buffalo之 bind,reply,ajax,view,form应用(二)

Buffalo之 bind,reply,ajax,view,form应用(一)
 http://liuzidong.iteye.com/blog/629893

三  数据绑定,提供html元素与后台Bean属性值相绑定
1 html代码
 
   <TABLE id="testTbl" border="1" jheight="1">
    <TR bgcolor="#FFCC00">     
       <TD jtext=id>
           id
       </TD>     
       <TD jtext="firstName">
           firstName
       </TD>
       <TD jtext="middleName">
           middleName
       </TD>
       <TD jtext="familyName">
           familyName
       </TD>
       <TD width="300" bgcolor="#FFCC00" jtext="age">
           age
       </TD>
       <TD width="300" bgcolor="#FFCC00" jtext="sex">
           sex
       </TD>
       <TD jtext="interests">
           interests
       </TD>
    </TR>
</TABLE>
 
2 JS函数:绑定元素
buffalo.bindReply("userService.getUsers", [], "testTbl");
or
buffalo.remoteCall("userService.getUsers", [], function(reply) {
     //获取返回源
    //Buffalo.bind("area", reply.getSource());
    Buffalo.bind("testTbl", reply.getResult());
})
 
//其它的绑定方式
 
 
Window.onload = function(){
var data = [
           {value:'value1', text:'text1'},
           {value:'value2', text:'text2',selected:true}
          ];
      
Buffalo.BindFactory.bindSelect($("sel1"), data);
 
var data = [
       {value:'value1', text:'text1', addProp: '#1', addVal: 'Val1'},
       {value:'value2', text:'text2', addProp: '#2', addVal: 'Val2'}
];
       
Buffalo.BindFactory.bindSelect($("sel3"), data, {
binder: function(data, option, index){
             var v = data;
             option.text = v.text + "-" + v.addProp;
             option.value = v.value + "|" + v.addVal;
}});
}
 
<form id="form1">
<select id="sel1" jvalue="value" jtext="text" onchange="alert(this.value);"></select> 
<select id="sel2" jvalue="value" jtext="text"></select>
<select id="sel3"></select>
</form>
 
//ajax调用简化
<script language="JavaScript" src="script/prototype.js"></script>
<script language="JavaScript" src="script/buffalo.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
//解析简单的XML文件
var replyString = "<buffalo-reply><double>0.5</double></buffalo-reply>";
var xmlhttp = XmlHttp.create();
xmlhttp.open("get", "sample-reply.xml", false);
xmlhttp.send(null);
var reply = new Buffalo.Reply(xmlhttp);
alert(replyString == reply.getSource());
alert(0.5 == reply.getResult());
</script>
 
//解析复杂的XML文件 
 Bug18.xml文件内容
<buffalo-reply>
    <map>
       <type>cn.com.carnegietech.User</type>
       <string>id</string>
       <int>123</int>
       <string>name</string>
       <string>张三</string>
       <string>password</string>
       <string>123456</string>
       <string>roles</string>
       <list>
           <type>java.util.HashSet</type>
           <length>1</length>
           <map>
              <type>cn.com.carnegietech.Role</type>
              <string>id</string>
              <int>22</int>
              <string>name</string>
              <string>李四</string>
           </map>       
       </list>
    </map>
</buffalo-reply>
 
JS代码: 
 
var xmlhttp = XmlHttp.create();
xmlhttp.open("get", "bug18.xml", false);
xmlhttp.send(null);
var reply = new Buffalo.Reply(xmlhttp);
var obj = reply.getResult();
alert("obj="+reply.getSource());
gObj = obj;
alert(gObj.id + " = " + gObj.name + " = " + gObj.password + " = " + gObj.roles.id+" = " +gObj.roles.name);
 
//引入其它页面内容绑定本页面中元素
var buffalo = new Buffalo("/bfapp");
var view = new Buffalo.View(buffalo);
//这里的 true,false没有区别?
view.switchPart('changeme', 'dump.html', true);
<div id="changeme">orginal text</div>
 
Buffalo之 bind,reply,ajax,view,form应用(三)
http://liuzidong.iteye.com/blog/629906
页: [1]
查看完整版本: Buffalo之 bind,reply,ajax,view,form应用(二)