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>
<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