Injecting a Document with data contained in these objects has in our experience been a somewhat tedious process, especially when juggling many data fields. A common practice was to riddle scripts with long strings made of HTML and data fragments, used to set the ".innerHTML" of an Element.
Despite a handful of useful utilities provided by the DWR framework, this approach however leads to front-end code that is harder to maintain and re-factor.
To further increase fun and productivity of working with DWR, IBDOM was born.
IBDOM defines the function $e("someID"), which returns an "augmented" version of a DOM Element, based on the passed ID string. This Element possesses "extra" methods defined in the API.
In IBDOM 0.2, $e() also accepts a node as an argument, and returns an augmented version of that node.
The method most pertinent to working with DWR is Element.populate(arguments). Arguments can be either of:
What follows is a simple example of injecting an HTML Table with an Array of VehicleListing Objects retrieved over a DWR call to UsedCarSearchManager.getAllListings().
<table> <thead> <tr> <th>Year</th> <th>Make</th> <th>Model</th> <th>Price</th> <th>Info</th> </tr> </thead> <tbody id="someCollection" class="IB_POPULATE"> <tr class="template:repeat"> <td>data:year</td> <td>data:make</td> <td>data:model</td> <td>$<span>data:price:type:number</span> or best offer</td> <td> <a href="about:data:vehicleUrl">Click here for more info on this <span>data:year</span> <span>data:make</span> <span>data:model</span> </a> </td> </tr> <tr class="template:empty_collection"> <td colspan="5">nothing was found</td> </tr> </tbody> </table>
The "Wielding Templates" section of "Using IBDOM" shows the possibility of creating documents that can load in an initial state with useful information accessible and pertinent to a wide variety of user-agents including search engine crawlers, while providing richer DWR-powered dynamic hooks to fancier user agents after the initial load.