Data binding in HTML (Binding)

Did the data ever think of using a recordset in JavaScript? Originally in the client operation data can also be so simple, define a data source, the data binding on a variety of tag, to achieve application-like effect, cool! (First of all, the content of the article comes from MSDN, but it's summed up in my own words.) ）

Let's take a look at two examples:
Http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm
Http://msdn.microsoft.com/workshop/samples/author/databind/dbupdate.htm
Have to admire Microsoft again.

This is the DataBinding architecture:




Of course implementing data binding has the following steps:

The first step is to define the data source
From IE4.0, the following four data sources are supported:


Tabular Data Control (TDC)
TDC provides a simple way to access formatted text data, typically a CSV file.
The following is a simple example:

<object classid= "Clsid:333c7bc4-460f-11d0-bc04-0080c7055a83"
Id=dsocomposer width=0 height=0>
<param name= "Dataurl" value= "Composer.csv" >
</OBJECT>


Remote Data Service (RDS)
Remote Data Services, direct access to remote server-side data, Internet Explorer 4.0. RDS is implemented through OLE-DB or Open Database connectivity (ODBC).

Example:

<object classid= "Clsid:bd96c556-65a3-11d0-983a-00c04fc29e33"
Id=dsocomposer height=0 width=0>
<param name= "Server" value= "Http://musicserver" >
<param name= "Connect" value= "dsn=music;uid=guest;pwd=" >
<param name= "SQL" value= "select Compsr_name from Composer" >
</OBJECT>
But it's a bit of a security issue because the client can see the code.

XML Data Source
XML is not much to say, it is used in IE4.0:
<applet
Code= "Com.ms.xml.dso.XMLDSO.class"
Id= "Xmldso"
Width= "0"
height= "0"
Mayscript= "true" >
<param name= "URL" value= "Composer.xml" >
</APPLET>

Internet Explorer more than 5 can do this:

<!--[if GTE IE 5]>
<xml id= "XML1" >
<topic-info>
<page-type>reference</page-type>
<member-type>property</member-type>
<persistent-name>ACCESSKEY</persistent-name>
<runtime-name readable= "1" writeable= "1" >accessKey</runtime-name>
<abstract>sets or retrieves the accelerator key for the object.</abstract>
</topic-info>
</XML>
<! [endif]-->

In addition, IE also provides an XML data island concept: XML Islands.


MSHTML Data Source
HTML Data Page Example:
&LT;H1 id=compsr_first>hector<marquee id=compsr_last>berlioz</marquee>
<div id=compsr_birth>1803</div>
&LT;H2 id=compsr_first>modest

<button id=compsr_birth>1839</button>
<textarea id=compsr_first>franz</textarea>
&LT;XMP id=compsr_last>liszt</xmp>
<span id=compsr_birth>1811</span>

Once defined you can access this:

<object id=htmlcomposer data= "compdata.htm" height=0 width=0>
</OBJECT>
. Step two: Bind data to HTML elements
is generally through the tag in the DATASRC and datafld implementation of the binding. For example:
<input type=textbox datasrc= "#dsoComposers" datafld= "Compsr_last" >
And
<table datasrc= #dsoComposer >
<TR>
<td><div datafld=compsr_first></div></td>
</TR>
</TABLE>
This is an example of a binding table:
Http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm

Where the data comes from:
<object id= "Tdccomposers" classid= "Clsid:333c7bc4-460f-11d0-bc04-0080c7055a83" >
<param name= "Dataurl" value= "Http://msdn.microsoft.com/workshop/samples/author/databind/composer.csv" >
<param name= "Useheader" value= "True" >
<param name= "TextQualifier" value= "'" >
</OBJECT>
The bound table
<table datasrc= #tdcComposers >
<thead><tr style= "Font-weight:bold" >
<td>first</td><td>last</td><td>birth</td><td>death</td><td >Origin</TD>
</TR></THEAD>
<TBODY>
<TR>
<td><div datafld= "Compsr_first" ></DIV></TD>
<td><div datafld= "Compsr_last" ></DIV></TD>
<td><div datafld= "Compsr_birth" ></DIV></TD>
<td><div datafld= "Compsr_death" ></DIV></TD>
<td><div Datafld= "origin" ></DIV></TD>
</TR>
</TBODY>
</TABLE>
That's the effect:
Birth Death Origin
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


Step three: Data dynamic Add, delete, etc. (object model)
Of course the bindings can be dynamic:
In script:
SPAN1.DATASRC = "#dsoComposer";
SPAN1.DATAFLD = "Compsr_first";

The HTML is like this:
<span datasrc= "#dsoComposer" datafld= "Compsr_first" ></SPAN>
And you can access the data source ADO:
var orecordset = Dsocomposer.recordset;
Naturally there is orecordset. MoveNext and so on.

Such as:
<input id=cmdnavfirst Type=button value= "<<"
Onclick= "TdcComposers.recordset.MoveFirst ()" >
<input Id=cmdnavprev Type=button value= "<"
Onclick= "tdcComposers.recordset.MovePrevious ();
if (TdcComposers.recordset.BOF)
TdcComposers.recordset.MoveFirst (); " >
<input id=cmdnavnext Type=button value= ">"
Onclick= "TdcComposers.recordset.MoveNext ();
if (TdcComposers.recordset.EOF)
TdcComposers.recordset.MoveLast (); " >
<input id=cmdnavlast Type=button value= ">>"
Onclick= "TdcComposers.recordset.MoveLast ()" >

You can also use this:
<script language= "VBScript" >
For each objfld in Rsattendees.fields
document.write ("The field name is" & Objfld.name & "<BR>")
document.write ("The field value is" & Objfld.value & "<BR>")
Next
</SCRIPT>

Add Delete record is: Orecordset.addnew () and Orecordset.delete ().

Step three: Respond to various data events (event model)
How do I deal with data changes after it is changed?
The approach provided in MSDN is this:
<script for=cbosort (data source name) Event=onchange (event name) >
......
</SCRIPT>
These are list of event names:

Event Bubbles cancelable applies to introduced in Internet Explorer Version
onbeforeupdate 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 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



What do you think?
I think Http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm is an example of the application of a more comprehensive, a good study, there will be gains.

There are many examples of using data binding to implement pagination on the web, but can data binding do more things? There should be a very large application in rich-client, such as making a very complex DataGrid.

What you want to do now is to make it easier to sync with the server side. Because the client's data binding has no effect on the server side (you can generate the data source from the server side, but the client does not automatically return to the server), the MSDN says RDS can, but this method is too clumsy and unsafe.