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[index];

             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>&nbsp;

<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[0].id+" = " +gObj.roles[0].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