HTML中的数据绑定（Data Binding）

有没想过在javascript中使用recordset？原来在客户端操作数据也可以这样简单，定义一个数据源，将数据绑定在各种tag上，实现应用程序般的效果，酷毙了！（首先申明一点，文章的内容全部来自msdn，不过用我自己的话总结而已。）

先看看这样两个例子：
http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm
http://msdn.microsoft.com/workshop/samples/author/databind/dbupdate.htm
不得不又一次佩服微软。

这个是DataBinding的架构：

架构

当然实现数据绑定有下面几步：

**第一步，定义数据源
** 从IE4.0起，就支持下面四种数据源：

Tabular Data Control (TDC)

TDC提供了一个简单的访问带有格式的文本数据的方法，一般是csv文件。
下面是一个简单的示例：

1<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" height="0" id="dsoComposer" width="0">
2<param name="DataURL" value="composer.csv"/>
3</object>

Remote Data Service (RDS)

远程数据服务，直接访问远程服务器端的数据，Internet Explorer 4.0. RDS 通过OLE-DB 或 Open Database Connectivity (ODBC)来实现。

示例：

1<object classid="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33" height="0" id="dsoComposer" width="0">
2<param name="Server" value="http://musicserver"/>
3<param name="Connect" value="dsn=music;uid=guest;pwd="/>
4<param name="SQL" value="select compsr_name from composer"/>
5</object>

不过感觉有点安全性的问题，因为客户端能看到这段代码。

XML Data Source

XML就不多说了，在IE4.0中这样使用：

1<applet code="com.ms.xml.dso.XMLDSO.class" height="0" id="xmldso" mayscript="true" width="0">
2<param name="URL" value="composer.xml"/>
3</applet>

Internet Explorer 5以上可以这样：

另外IE还提供了一个XML数据岛的概念： XML Data Islands .

MSHTML Data Source

html数据页示例：

1<h1 id="COMPSR_FIRST">Hector</h1>

1<marquee id="COMPSR_LAST">Berlioz</marquee>

1<div id="COMPSR_BIRTH">1803</div>

1<h2 id="COMPSR_FIRST">Modest</h2>

1<h3 id="COMPSR_LAST">Moussorgsky</h3>

1<button id="COMPSR_BIRTH">1839</button>

1<textarea id="COMPSR_FIRST">Franz</textarea>

1<xmp id="COMPSR_LAST">Liszt</xmp>

1<span id="COMPSR_BIRTH">1811</span>

一旦定义可以这样访问：

1<object data="compdata.htm" height="0" id="htmlComposer" width="0">
2</object>

**.第二步：绑定数据到HTML元素上
** 一般都是通过tag中的datasrc和datafld实现绑定的。例如：

1<input datafld="compsr_last" datasrc="#dsoComposers" type="TEXTBOX"/>

和

1<table datasrc="#dsoComposer">
2<tr>
3<td><div datafld="compsr_first"></div></td>
4</tr>
5</table>

这个是绑定表格的示例：
http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm

其中数据来源：

1<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="tdcComposers">
2<param name="DataURL" value=" http://msdn.microsoft.com/workshop/samples/author/databind/composer.csv "/>
3<param name="UseHeader" value="True"/>
4<param name="TextQualifier" value="'"/>
5</object>

绑定的table

 1<table datasrc="#tdcComposers">
 2<thead><tr style="font-weight:bold">
 3<td>First</td><td>Last</td><td>Birth</td><td>Death</td><td>Origin</td>
 4</tr></thead>
 5<tbody>
 6<tr>
 7<td><div datafld="compsr_first"></div></td>
 8<td><div datafld="compsr_last"></div></td>
 9<td><div datafld="compsr_birth"></div></td>
10<td><div datafld="compsr_death"></div></td>
11<td><div datafld="origin"></div></td>
12</tr>
13</tbody>
14</table>

这就是效果了：

FirstLastBirthDeathOrigin

Hector

|

Berlioz

|

1803

|

1869

|

France

Modest

|

Moussorgsky

|

1839

|

1881

|

Russia

Franz

|

Liszt

|

1811

|

1886

|

France

Antonio

|

Vivaldi

|

1678

|

1741

|

Italy

Johann Sebastian

|

Bach

|

1685

|

1750

|

Germany

Ludwig van

|

Beethoven

|

1770

|

1827

|

Germany

Wolfgang Amadeus

|

Mozart

|

1756

|

1791

|

Austria

Joseph

|

Haydn

|

1732

|

1809

|

Germany

Claude

|

Debussy

|

1862

|

1918

|

France

** 第三步：数据的动态添加，删除等等（对象模型） **
当然绑定可以是动态的：
在script中：
span1.dataSrc = "#dsoComposer";
span1.dataFld = "compsr_first";

html是这样的：

1<span datafld="compsr_first" datasrc="#dsoComposer"></span>

而且可以访问数据源的ado：
var oRecordSet = dsoComposer.recordset;
自然就有 oRecordSet .MoveNext 等等。

如：

1<input id="cmdNavFirst" onclick="tdcComposers.recordset.MoveFirst()" type="BUTTON" value="&lt;&lt;"/>

1<input id="cmdNavPrev" onclick="tdcComposers.recordset.MovePrevious();   
2if (tdcComposers.recordset.BOF)   
3tdcComposers.recordset.MoveFirst();" type="BUTTON" value=" &lt; "/>

1<input id="cmdNavNext" onclick="tdcComposers.recordset.MoveNext();   
2if (tdcComposers.recordset.EOF)   
3tdcComposers.recordset.MoveLast();" type="BUTTON" value=" &gt; "/>

1<input id="cmdNavLast" onclick="tdcComposers.recordset.MoveLast()" type="BUTTON" value="&gt;&gt;"/>

还可以这样用：

1<script language="VBScript">   
2For Each objFld in rsAttendees.Fields   
3document.write("The field name is " & objFld.Name & "<BR>")   
4document.write("The field value is " & objFld.Value & "<BR>")   
5Next   
6</script>

添加删除记录就是：oRecordSet.AddNew()以及oRecordSet.Delete()。

**第三步：响应各种数据事件（事件模型）
** 如何在数据更改后做出相应的处理？
msdn中提供的方法是这样的：

1<script event="onchange（事件名）" for="cboSort（数据源名）">   
2……   
3</script>

这些是事件名列表：

EventBubblesCancelableApplies toIntroduced In Internet Explorer Version

onbeforeupdate

|

True

|

True

|

bound elements

|

4.0

onafterupdate

|

True

|

False

|

bound elements

|

4.0

onrowenter

|

True

|

False

|

DSO

|

4.0

onrowexit

|

True

|

True

|

DSO

|

4.0

onbeforeunload

|

False

|

False

|

window

|

4.0

ondataavailable

|

True

|

False

|

DSO

|

4.0

ondatasetcomplete

|

True

|

False

|

DSO

|

4.0

ondatasetchanged

|

True

|

False

|

DSO

|

4.0

onerrorupdate

|

True

|

True

|

bound elements

|

4.0

onreadystatechange

|

True

|

False

|

DSO

|

4.0

oncellchange

|

True

|

False

|

DSO

|

5.0

onrowsinserted

|

True

|

False

|

DSO

|

5.0

onrowsdelete

|

True

|

False

|

DSO

|

5.0

怎么样？
我觉得 http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm 算是一个应用比较综合的例子了，好好研究一下，必有收获。

网上有不少利用数据绑定实现分页的示例，其实数据绑定还可以做更多的事情吧？应该在rich client里面有非常大的应用，例如制作非常复杂的datagrid。

现在想进一步搞清楚的是如何简便实现与服务器端的同步，因为客户端的数据绑定是对服务器端没有影响的（你可以从服务器端生成数据源，但是在客户端的操作不会自动返回服务器），msdn上说RDS可以，但是这种方法太笨拙了吧，又不安全。

Published At
Categories with Web编程
Tagged with
comments powered by Disqus