Wednesday, May 16th, 2007

IBDOM: “Wielding the Document Object Model with Ease and Standards-Compliance”

Category: JavaScript, JSON, Library

Chris Holland has released IBDOM, a library that aims to make working with the DOM lots of fun ;)

The core of the library is about injecting HTML.


  1. <div id="myCarInfo">
  2.         <h1 title="data:lastUpdated">
  3.             <span>data:make</span>
  4.             <span>data:model</span>
  5.             <span>data:year</span>
  6.         </h1>
  7. </div>

Given the HTML and the following JSON:


  1. var carInfoObject = {
  2.     make: "BMW",
  3.     model: "325i",
  4.     year: "2002",
  5.     lastUpdated: new Date(481516234200)
  6. }

you can populate the DOM via:


  1. $e("myCarInfo").populate(carInfoObject);

There are some interesting features such as:

  • DWR support gives you a nice abstraction and separation
  • conditional class setting based on object property’s value:
    1. <td class="setclass:TEST_YEAR{if}((this.year==2002))
    2. SOME_OTHER_CLASS">data:year</td>
  • Two repeating-template mechanisms when dealing with arrays of

      1. <tbody id="someCollection" class="use_template:repeat|
      2. vehicle_row use_template:empty_collection|nothingWasFound">
      3. </tbody>

      where the class attribute refers to templates defined in a div

    1. <tbody id="someCollection>… Templates can be inserted here instead of stashed-away …

Posted by Dion Almaer at 7:25 am

3.8 rating from 8 votes


Comments feed TrackBack URI

Looks cool! I can already think of 1000 uses for this. Thanks!

Comment by Joe Rosenblum — May 16, 2007

Cool. Testing

Comment by Zac Heismann — May 16, 2007

This is essential if you’re working with structured data and html. Good stuff!

Comment by exliontamer — May 17, 2007

The syntax is rather difficult to understand, compared to adobe spry or MindFrame (similar project I found in Ajaxian)

Comment by Robert — May 21, 2007

Robert: Spry and Mindframe do indeed look good, and larger in scope. IBDOM’s smaller scope and size (i’ve not yet released a minified version of it, that’s coming soon) should make it a nice complement to many existing frameworks.

Yesterday we put out an “interactive demo” that lets users edit JS objects in input fields, then click a button to inject the data in an HTML table. There’s also some updated documentation. I’m hoping this will make the basic syntax more digestible. The “ibdom_tests” page is likely a bit overwhelming to newcomers as it really tests just about everything IBDOM can do.

Exliontamer: Thanks :) Do let us know if you use it.

Comment by chris holland — May 23, 2007

It is very interesting to see how fast it can handle large data, since DOM is considered to be slow.

Comment by Rizqi Ahmad — May 28, 2007

Rizqi: If you’ve got load-test examples using IBDOM, feel free to publish them somewhere so i could link to it. I’ve yet to play with MindFrame.

I found a number of performance issues in IBDOM release 0.1 which i’ve addressed in a soon-to-be-released 0.2, with a detailed explanation in the changelog. It will be the first IBDOM version we’ll be using in production for our used cars search application ( ), which will replace the current usage of an older library i had written in a hurry.

Comment by chris holland — May 31, 2007

Leave a comment

You must be logged in to post a comment.