绑定 - Buffalo

绑定

推荐好文评价

出处：redsaga.com 作者：cleverpig 更新时间：2007-05-19

Buffalo支持将对象值绑定到DOM成员上，包括form成员（text, password, hidden, radio, checkbox,select, textarea），table, form, div/span，它也能转换form到具体java类型的对象。它只提供了一种能绑定所有类型值到不同form成员的便捷方法。

你可以如此轻松地使用绑定：

buffalo.bindReply("yourService.method", [parameters], "elementId")

上面的代码片断尝试把"parameters"作为参数调用"yourService.method"，然后绑定调用结果给"elementId"。

如果你并不想作远程调用，也可以按下面的方式使用绑定：

Buffalo.Bind.bind(elementId, bindValue)

它将绑定"bindValue"到"elementId" 。

[注意]：这里无需在意form成员的不同类型。buffalo将检查类型并完成正确的绑定行为。

绑定form成员：

绑定text, hidden, password, textarea
1. 被绑定值的类型:原始类型如：String, int, long, float...
2. 行为:element.value=bindValue
绑定checkbox, radio
1. 被绑定值的类型: 需要检查值是否为("true"|"yes"|"1"|true|1)
2. 行为: element.checked=bindValue==("true"|"yes"|"1"|true|1)
绑定select
1. 被绑定值的类型:对象数组（Array of objects）
2. 行为:数组中每个成员（对象）增加一个option，select应用额外的<jtext>和<jvalue>属性来告诉绑定：对象的字段（field）如何绑定到text/value上。
3. 特殊的必要条件:<jtext>和<jvalue>属性应该添加到select成员中，来告知select成员对象的字段（field）如何绑定。

<select id="provinces" jtext="name" jvalue="value"></select>

/* Data */
var data = [{name: "Hu Bei", value:"HB"} ,{name: "Shan Xi", value:"SX"}]

/* Binding */
Buffalo.Bind.bind("provinces", data);

当上面的例子执行时，select将增加两个option，option的text为data["name"]，value为data["value"]。

绑定表格

绑定表格有一些复杂。有3种绑定表格的方式。你需要提供<table>的<jheight>属性和<td>的<jtext>属性。(www.iocblog.net 文章来源)
<jheight>属性告诉buffalo如何复制样式（style），<jtext>则告诉buffalo绑定值的哪个字段用于显示。

被绑定值的类型:对象数组（Array of objects）
行为:因<jheight>属性值而不同
1. <jheight>=0时，它将删除表格的所有行，增加显示对象所有字段的行。
2. <jheight>=1时，它将表格的第一行视为表头，删除其余的所有行，增加显示对象[<jtext>]的行。
3. <jheight>=2时，它将表格的第一行视为表头、将第二行视为样式，删除其余的所有行，增加显示对象[<jtext>]的行。
4. <jheight>=3时，它将表格的第一行视为表头、将第二行视为奇数行样式、将第三行视为偶数行样式，删除其余的所有行，增加显示对象[<jtext>]的行。
特殊的必要条件:<table>的<jheight>属性和<td>的<jtext>属性。

例子:

<table id="table" jheight="0"></table>

jheight=0, 表格上将显示出所有的绑定值。

<table id="locales" jheight="1">

<tr bgcolor="#FFCC00">

<td jtext="language">Language</td>

<td width="300" bgcolor="#FFCC00" jtext="country">Country</td>

<td jtext="variant">variant</td>

<td jtext="hashcode">Hashcode</td>

</tr>

</table>

jheight=1, buffalo将使用第一行作为表头，显示所有的定义在<jtext>中的绑定值。

<table id="locales" jheight="2">

<tr bgcolor="#FFCC00">

<td jtext="language">Language</td>

<td width="300" bgcolor="#FFCC00" jtext="country">Country</td>

<td jtext="variant">variant</td>

<td jtext="hashcode">Hashcode</td>

</tr>

<tr bgcolor="#ffff66">

<td>a</td>

<td width="300">d</td>

<td>c</td>

<td>d</td>

</tr>

</table>

jheight=2, buffalo将使用第一行作为表头，第二行作为样式，显示所有的定义在<jtext>中的绑定值。

<table id="locales" jheight="3">

<tr bgcolor="#FFCC00">

<td jtext="language">Language</td>

<td width="300" bgcolor="#FFCC00" jtext="country">Country</td>

<td jtext="variant">variant</td>

<td jtext="hashcode">Hashcode</td>

</tr>

<tr bgcolor="#ffff66">

<td>a</td>

<td width="300">d</td>

<td>c</td>

<td>d</td>

</tr>

<tr bgcolor="#66ff66">

<td>a</td>

<td width="300">d</td>

<td>c</td>

<td>d</td>

</tr>

</table>

jheight=3, buffalo将使用第一行作为表头，第二行作为奇数行样式，第三行作为偶数行样式，显示所有的定义在<jtext>中的绑定值。

绑定form

Buffalo能直接绑定对象值到form中。

被绑定值的类型:对象
行为:当同样的form成员名称存在于对象时，对象的相应值会被绑定到这个form成员上。对于checkbox/多项选择的select，使用数组类型的值去尝试check或select所有的checkbox或所有option。

示例:

/* Data */

var data = {

username: "Michael",

password: "newpass",

gendor: "boy",

interest: ["B","C"],

option1: ["1","3"],

option2: "3"

}

<!-- HTML -->

<form id="form3" name="form3">

 <label>Username</label>

 <input type="text" name="username" id="username">

 <br>

 <label>Password</label>

<input type="text" name="password" id="label">

<br>

Gendor:

<input type="radio" name="gendor" value="boy" id="radiobutton">

<label>Boy</label>

<input type="radio" name="gendor" value="girl" id="radio">

<label>Girl</label>

<br>

Interest:

<input type="checkbox" name="interest" value="A" id="interest">

<label>A</label>

<input type="checkbox" name="interest" value="B" id="interest">

<label>B</label>

<input type="checkbox" name="interest" value="C" id="interest">

<label>C</label>

<br>

<label>Option</label>

<select name="option1" size="3" multiple="true">

 <option value="1" selected>Option1</option>

 <option value="2" selected>Option2</option>

 <option value="3">Option3</option>

</select>

<select name="option2">

 <option value="1">Option1</option>

 <option value="2" selected=true>Option2</option>

 <option value="3">Option3</option>

</select>

<label></label>

<input type="submit" name="submit" value="submit" id="Submit">

</form>

/* Binding */

Buffalo.Bind.bind("form3", data);

或Buffalo.Form.bindForm("form3", data);

绑定结果: 见图中form3

转换form为bean

一些用户恨透了在进行一次远程调用时从form中构造参数。Buffalo.Form.formToBean会使这一切变得简单。

Buffalo.Form.formToBean(form, buffaloObjectClass, ignoreButton)

上面的代码片断将转换form为buffaloObjectClass类型的bean。(www.iocblog.net 文章来源)

参数说明:

form:form id或是form对象，这是必需的参数。

buffaloObjectClass:你要转换为的类，不是必备参数。如果没有提供，buffalo默认为是java.util.HashMap类。

ignoreButton:转换过程中是否忽略掉form中的button。不是必备参数，默认为true。

转换风格:

所有的值都是字符串或者字符串的列表。

单个字符串值将被转换为字符串，多个字符串值将被转换为字符串的列表。服务器端将使用java.util.List类来存放字符串的列表。

文章整理：iocblog
版权申明：本站文章均来自网络，如有侵权，请联系我们，我们收到后立即删除，谢谢！
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有。

热门文章

相关项目