Jun 3

绑定 不指定

chirs , 15:17 , 瓜哇天地 » BUFFALO , 评论(0) , 引用(0) , 阅读(3360) , Via 本站原创 | |
  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成员
  1.绑定text, hidden, password, textarea
    1.被绑定值的类型:原始类型如:String, int, long, float...
    2.行为:element.value=bindValue
  2.绑定checkbox, radio
    1.被绑定值的类型: 需要检查值是否为("true"|"yes"|"1"|true|1)
    2.行为: element.checked=bindValue==("true"|"yes"|"1"|true|1)
  3.绑定select
    1.被绑定值的类型:对象数组(Array of objects)
    2.行为:数组中每个成员(对象)增加一个option,select应用额外的属性来告诉绑定:对象的字段(field)如何绑定到text/value上。
    3.特殊的必要条件:属性应该添加到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种绑定表格的方式。你需要提供的属性和
属性。
  属性告诉buffalo如何复制样式(style),则告诉buffalo绑定值的哪个字段用于显示。

  1.被绑定值的类型:对象数组(Array of objects)
  2.行为:因属性值而不同
    1.=0时,它将删除表格的所有行,增加显示对象所有字段的行。
    2.=1时,它将表格的第一行视为表头,删除其余的所有行,增加显示对象[]的行。
    3.=2时,它将表格的第一行视为表头、将第二行视为样式,删除其余的所有行,增加显示对象[]的行。
    4.=3时,它将表格的第一行视为表头、将第二行视为奇数行样式、将第三行视为偶数行样式,删除其余的所有行,增加显示对象[]的行。
  3.特殊的必要条件:的属性和
属性。
  例子:
<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将使用第一行作为表头,显示所有的定义在中的绑定值。

<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将使用第一行作为表头,第二行作为样式,显示所有的定义在中的绑定值。

<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将使用第一行作为表头,第二行作为奇数行样式,第三行作为偶数行样式,显示所有的定义在中的绑定值。
  绑定form
  Buffalo能直接绑定对象值到form中。
  1.被绑定值的类型:对象
  2.行为:当同样的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。

  参数说明:
  1.form:form id或是form对象,这是必需的参数。
  2.buffaloObjectClass:你要转换为的类,不是必备参数。如果没有提供,buffalo默认为是java.util.HashMap类。
  3.ignoreButton:转换过程中是否忽略掉form中的button。不是必备参数,默认为true。

  转换风格:
  1.所有的值都是字符串或者字符串的列表。
  2.单个字符串值将被转换为字符串,多个字符串值将被转换为字符串的列表。服务器端将使用java.util.List类来存放字符串的列表。
Tags: , , , ,
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]