Data binding is a DHTML feature that lets you easily bind individual elements in your document to data from another source, such as a database or comma-delimited text file. When the document is loaded, the data is automatically retrieved from the source and formatted and displayed within the element.
One practical way to use data binding is to automatically and dynamically generate tables in your document. You can do this by binding a table element to a data source. When the document is viewed, a new row is created in the table for each record retrieved from the source, and the cells of each row are filled with text and data from the fields of the record. Because this generation is dynamic, the user can view the page while new rows are created in the table. Additionally, once all the table data is present, you can manipulate (sort or filter) the data without requiring the server to send additional data. The table is regenerated, using the previously retrieved data to fill the new rows and cells of the table.
Another practical use of data binding is to bind one or more elements in the document to specific fields of a given record. When the page is viewed, the elements are filled with text and data from the fields in that record, sometimes called the "current" record. An example is a form letter in which the name, e-mail address, and other details about an individual are filled from a database. To adapt the letter for a given individual, you specify which record should be the current record. No other changes to the letter are needed.
Yet another practical use is to bind the fields in a form to fields in a record. Not only can the user view the content of the record, but the user can also change that content by changing the settings and values of the form. The user can then submit these changes so that the new data is uploaded to the source—for example, to the HTTP server or database.
To provide data binding in your documents, you must add a data source object (DSO) to your document. This invisible object is an ActiveX control or Java applet that knows how to communicate with the data source. The following example shows how easy it is to bind a table to a DSO. When viewed, this example displays the first three fields from all the comma-delimited records of the file "sampdata.csv" in a clear, easy-to-read table.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Data Binding Example</title> <style> td, th {border:1px solid;} </style> </head> <body> <h1>Data Binding Example</h1> <object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="sampdata"> <param name="DataURL" value="sampdata.csv"> <param name="UseHeader" value="True"> </object> <table datasrc="#sampdata"> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> </tr> </thead> <!-- Fields will not display without the accompanying CSV file. --> <tbody> <tr> <td><span datafld="a"></span></td> <td><span datafld="b"></span></td> <td><span datafld="c"></span></td> </tr> </tbody> </table> </body> </html>
No comments:
Post a Comment