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.
Example
- <div id="myCarInfo">
- <h1 title="data:lastUpdated">
- <span>data:make</span>
- <span>data:model</span>
- <span>data:year</span>
- </h1>
- </div>
Given the HTML and the following JSON:
- var carInfoObject = {
- make: "BMW",
- model: "325i",
- year: "2002",
- lastUpdated: new Date(481516234200)
- }
you can populate the DOM via:
- $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:
- <td class="setclass:TEST_YEAR{if}((this.year==2002))
- SOME_OTHER_CLASS">data:year</td>
- Two repeating-template mechanisms when dealing with arrays of
objects:-
- <tbody id="someCollection" class="use_template:repeat|
- vehicle_row use_template:empty_collection|nothingWasFound">
- </tbody>
where the class attribute refers to templates defined in a div
class=”templates” <tbody id="someCollection>… Templates can be inserted here instead of stashed-away …
-
3.8 rating from 8 votes
Looks cool! I can already think of 1000 uses for this. Thanks!
Cool. Testing
This is essential if you’re working with structured data and html. Good stuff!
The syntax is rather difficult to understand, compared to adobe spry or MindFrame (similar project I found in Ajaxian)
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.
It is very interesting to see how fast it can handle large data, since DOM is considered to be slow.
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 ( http://www.carsdirect.com/used_cars/search ), which will replace the current usage of an older library i had written in a hurry.