Data binding in HTML _css/html

Information Source: Wayne_deng's Column

Have you ever thought of using a recordset in Java script? Originally in the client operation data can also be so simple, define a data source, the data binding on a variety of tags, to achieve application-like effect, cool! (First of all, the content of the article is all from MSDN, but it is summed up in my own words.) ）

Let's take a look at these 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 once again.

This is the architecture of databinding:

Of course, implementing data binding has the following steps:

The first step is to define the data source
As of 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:


Id=dsocomposer width=0 height=0>




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

Example:


Id=dsocomposer height=0 width=0>




But it feels a bit safer because the client can see the code.

XML Data Source
XML is not much to say, in IE4.0 this use:
Code= "Com.ms.xml.dso.XMLDSO.class"
Id= "Xmldso"
Width= "0"
height= "0"
Mayscript= "true" >



More than 5 of Internet Explorer can do this:



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


MSHTML Data Source
HTML Data Page Example:

Hector

Berlioz
1803

Modest

Moussorgsky

1839
<textarea id="COMPSR_FIRST">Franz</textarea>
&lt;xmp id="COMPSR_LAST"&gt;Liszt&lt;/xmp&gt;
1811

Once the definition can be accessed like this:



. Step two: Bind the data to the HTML element
The bindings are usually implemented by DATASRC and datafld in the tag. For example:

And





This is an example of a binding table:
Http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm

Where data sources:





The bound table

First	Last	Birth	Death	Origin

This is the effect:
First Last 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: Dynamic addition of data, deletion, etc. (object model)
Of course the bindings can be dynamic:
In script:
SPAN1.DATASRC = "#dsoComposer";
SPAN1.DATAFLD = "Compsr_first";

The HTML is like this:

and ADO that can access the data source:
var orecordset = Dsocomposer.recordset;
Naturally there is orecordset. MoveNext and so on.

Such as:

Onclick= "TdcComposers.recordset.MoveFirst ()" >

Onclick= "tdcComposers.recordset.MovePrevious ();
if (TdcComposers.recordset.BOF)
TdcComposers.recordset.MoveFirst (); " >

Onclick= "TdcComposers.recordset.MoveNext ();
if (TdcComposers.recordset.EOF)
TdcComposers.recordset.MoveLast (); " >

Onclick= "TdcComposers.recordset.MoveLast ()" >

You can also use this:


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

Step three: Respond to various data events (event model)
How do I make the appropriate processing after the data changes?
The approach provided in MSDN is like this:

These are the list of event names:

Event Bubbles cancelable applies to introduced 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



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

There are many examples of using data binding to achieve paging, in fact, data binding can do more things? There should be very large applications in rich client, such as making a very complex DataGrid.

Now we want to make it a little bit easier to synchronize with the server side, because the client's data binding is not affected on the server side (you can generate the data source from the server side, but the operation on the client will not automatically return to the server), MSDN said RDS can, but this method is too clumsy, and not secure.

