The other two interesting chunks of code are at the bottom; there are two different tags holding a datasource attribute, and thus two places where the data island content will be folded into the main page content. The datafield attribute says what piece of data to add in. Both datasource and datafield are custom attributes not specified in HTML nor in the Microsoft data island spec. I’ve made them up, which is legal in strict HTML 4.01.

Even this small amount of markup exceeds the limitations of the Microsoft solution. Here we’re folding data into an unordered list and into form elements embedded in a table. Both of those examples are difficult or impossible to do with the Microsoft solution.

By itself, this HTML content does very little. You need to add a little script to manipulate the data.

Planning the Script
To implement data binding, you can use a DHTML technique?a script that manipulates the document content. The days of incomprehensible spaghetti-like DHTML are gone now?standards are firmly in place, and DHTML code is expected to be very clean. As a minimum, all the code should be neatly encapsulated in a JavaScript object where it’s kept tidily separate from other code. Here’s the skeleton of the data-binding object, which will be nearly the entire content of islands.js:

   var islands = {     isMSIE : ...,     getElementsByAttribute :         function (node, att) { ...},     getEBArecursive :        function (list, node, att) { ...},     getFieldDataFromRecord :        function (rec,field) { ... },     makeIEtree : function (island) { ... },     merge : function (target, template, record) { ... },     bind : function () { ... }   };

This is a literal object (similar to a Perl hash) that consists of seven properties: a simple value, isMSIE, and six anonymously defined functions. Each function is assigned to a property, so each property acts as an object method. Anonymous functions specified like this are useful because they appear only in the object where they’re defined. That means this object can be included in any Web page without fear of clashing with someone else’s function names. Only the island’s variable name needs to be unique.

To complete this object requires only replacing the ellipses with code. But before doing that, here’s an explanation of what each property does.

• isMSIE is simple; it’s just a browser check flag.
• getElementsByAttribute() scans a document for nodes that have a specific attribute. Because the DOM standards don’t offer such a function, one’s been made up.
• getEBArecursive() is a recursive version of getElementsByAttribute() that reduces the amount of code required.
• getFieldDataFromRecord() extracts a datafield item from the data island.
• makeIEtree() fixes some broken behavior in IE?you’ll see how shortly.
• merge() takes the page content, a special template, and the data island data, and creates the final content.
• bind() is the first thing called; it’s what makes everything happen.

Now, you have to make the binding happen. You do that by adding an onload event handler to the end of islands.js:

   window.onload = function () { islands.bind(); };

There’s another fancy JavaScript feature at work in this line: scope chains. It’s best not to use this simpler syntax:

   window.onload = islands.bind();

If you use the simple syntax, when the bind() method runs, the current object is the window object. But calling the bind() method from its own object, inside an anonymous function, places the island’s object “in scope.” That way, it’s easy to refer to other methods in the islands object using the special this property, which saves you from having to pollute the object methods with references to the islands variable.

Planning the Object Methods
Here’s how binding is implemented. First, the unfortunate browser check is trivial, so let’s get that out of the way:

   isMSIE:(window.navigator.userAgent.search('MSIE')!=-1)

The bind() method does all the work. For planning purposes, here’s a list of the tasks the method must accomplish:

1. Find all the datasource targets. For each one:
2.   Extract the target’s existing content into a separate template
3.   If it’s IE, repair the matching data island
4.   Find each record in the matching data island, and for each one:
5.     Merge the record and the template
6.     Copy the merged template back into the page.

Some of the methods required are quite general; you can find such things scattered all over the Web in existing pages and in the blogs of leading Web thinkers. Here’s an implementation. First, the getElementsByAttribute() method, which is just a wrapper around the recursive version:

     getElementsByAttribute : function (node, att) {       var rv = [];       this.getEBArecursive(rv, node, att);       return rv;     },

Given any DOM node and an attribute name, it returns all matching DOM nodes underneath (“inside”) that node in an array. Here’s the part that does the work:

     getEBArecursive : function (list, node, att) {       for (var i=node.childNodes.length-1; i>=0; i--)       {         var child = node.childNodes.item(i);         if ( child.nodeType == 1 ) {           if ( child.getAttribute(att) ) {             list.push(child);           }           this.getEBArecursive(list, child, att);         }       }     },

The recursive version passes the list of found nodes and the current node to itself. For each child of a node that’s an element node (a tag), it checks for the attribute and records the node if it’s found, otherwise, it call itself again on that child. When there’s nothing left to search, the for loop does nothing and the recursion ends with a fully built list.

The other rather general function is getFieldDataFromRecord(). Given a node and a tag name, it digs into the node’s subtree and extracts the content of that named tag:

     getFieldDataFromRecord : function (rec,field) {       var found;       for (var i=0; i < rec.childNodes.length; i++) {         if (rec.childNodes.item(i).nodeName.           toLowerCase()==field) {           found = rec.childNodes.item(i).firstChild;         if (found == null )           return "";         else           return found.nodeValue;         }       }     },

This function assumes that the records are arranged in a three-level hierarchy: the record's tag, each data item's tag, and the data held between start and end tags of the data item.

With that preparation out of the way, here's the meaty part.

Implementing the Binding
I'm going to jump forward a little bit and show you the final binding logic. Here's the bind() method.

     bind : function () {       // 1. Find all the datasources in the page.       var targets =          this.getElementsByAttribute(         document,'datasource');       if (!targets || targets.length == 0) return;          // Do it for each data binding 'target' in        // the page        for (var i=0; i < targets.length; i++) {         var iid = targets[i].getAttribute('datasource');         var island = document.getElementById(iid);         if (!island) return;            // 2. Extract a copy of the current content          // for this target         var template = targets[i].cloneNode(true);            // ... and delete the real copy         for (var j = targets[i].childNodes.length-1;             j>=0; j--) {            targets[i].removeChild(               targets[i].childNodes.item(j));         }            if ( this.isMSIE ) { island =             this.makeIEtree(island); }            // 4. Apply the template once for each          // XML record         for (j = 0; j < island.childNodes.length; j++)         {           // children that are text nodes aren't            // real records           var record = island.childNodes.item(j);           if ( record.nodeName == '#text' )             continue;              // 5, 6. Combine page, template and data           this.merge(targets[i], template, record);         }                    if ( this.isMSIE ) { delete island; }       }     }

There's an outside loop for each data source, and an inside loop for each record. When the code finds a datasource tag, you want to replace its content. That entails extracting its content from the page, working on it, and putting it back. The final content combines the DOM subtrees pointed to by the template and islands. Because there might be more than one record per data source, you might have to put it back several times.

The one wrinkle in this is (from a standards point of view) IE's vile behavior. When extracting the data island, IE returns a node, but you can't walk the subtree underneath that node. Instead, IE gives back a flat list of start tags, text and end tags. The makeIEtree() function takes this mess and creates a proper DOM tree out of it. You can see it created and then destroyed on either side of steps 4-6. Here's the code:

     makeIEtree : function (island) {       var subtree =           document.createElement(island.nodeName);       var current = subtree;       var next;          for (var j = 0; j < island.childNodes.length; j++)       {         var record = island.childNodes.item(j);         if ( record.nodeName == '#text' )         {           current.appendChild(             document.createTextNode(record.nodeValue));         }         else if ( record.nodeName.charAt(0) == '/' )         {           current = current.parentNode;         }         else         {           next = document.createElement(              record.nodeName);           current.appendChild(next);           current = next;         }       }       return subtree;     },

This method has a simple loop that runs through the mess that IE returns. The subtree variable is the top of the DOM tree being built; current points to the sub-part of the subtree that's being created; and next is used temporarily to create nodes. Each time the code identifies a new tag, it creates a node and current steps down into it. Each time it identifies a closing tag, current steps back up one node. Otherwise, it just adds whatever is found to the set of child nodes for the current node.

With that obstacle out of the way, all that's left to do is process the found information each time. That's the province of the merge() method:

     merge : function (target, template, record) {       // dig out the fields requiring update       var fields =       this.getElementsByAttribute(template,'datafield');          if (!fields || fields.length == 0) next;          // update text for target fields in the template       for (var k=fields.length-1; k>=0; k--) {         var thetag   = fields[k];         var thefield = thetag.getAttribute('datafield');         var newtext  =            this.getFieldDataFromRecord(record,thefield);            if (thetag.firstChild)  // replace existing text         {           thetag.firstChild.nodeValue = newtext;         }         else if ( thetag.value == null ) // not form tag         {           thetag.appendChild(             document.createTextNode(newtext));         }         else                           // a form element         {           thetag.value = newtext;         }       }          // put the updated content back into the page.       for (k=0; k < template.childNodes.length; k++) {         target.appendChild(           template.childNodes.item(k).cloneNode(true));       }     },

First, the merge method finds all the datafield-laden tags in the target and puts them into an array. Then, for each one, it finds any matching content in the supplied record. There are three cases to consider when putting that matched content into the template (the original page content). Either the content tag already contains text (replace), or it doesn't (add), or it's a form element, in which case the data should go into the value property. Finally, it copies everything in the updated template back into the page itself. All done?all you have to do to make it run is load the page. You can download the sample code and try it in your preferred browser.

Notice that this more professional DHTML code is free of many of the older worries: we don't have event handlers embedded in the page; there's a reduced emphasis on browser-specific tests (only do that when there's no choice), and the effect that's being achieved is serious and meaningful, not a gimmick or a distraction. With the explosive influence of AJAX and other DHTML-related techniques lately, expect to see more of this kind of thing in practitioner's work and in client demands.

Data islands are easy to implement cross-browser using a little generic code. This article shows how to display data-island driven content, including integrating that content into forms, tables and non-tabular markup like lists. With a little more effort you could extend this into a sophisticated data management system, and indeed, a number of experiments have been performed in that area. With the demise of ancient browsers such as IE 4.0 and Netscape 4.x, and the rise of Mozilla and Firefox, DHTML is a more powerful and generally applicable technique than it ever was before. Unlock your IE-specific applications with modern DHTML.