Posted on April 13, 2009 at 3:58 pm

A Mochikit style Dombuilder for YUI

Before moving to YUI about a year ago, I was using Mochikit as my primary JS library. As advertised, Mochikit happens to be one of the most pythonic javascript libraries ever. One of the sweetest parts of Mochikit IMO has been Mochikit.DOM. This is something which I’ve always missed with YUI. innerHTML is fast, but icky and it feels a little inelegant. So, I ended up writing something like Mochikit.DOM for YUI while writing Tagz. Thought it might be useful to others as well. So, here’s the mercurial repo with the code.

The utils.js file contains some utility functions like forEach, map, filter, partial. The only function from utils.js used in dombuilder.js is partial, so you might want to add it to dombuilder.js to remove the dependence on utils.js.

Here’s an obligatory trivial example (included in the repo).

6 Responses to “A Mochikit style Dombuilder for YUI”

  1. Dav Glass on April 13th, 2009 at 10:40 PM says:

    This is nice, how about moving the source to GitHub and adding it as a module to the yui2 project?
    http://github.com/yui/yui2

    See here about contributing:
    http://yuilibrary.com/contrib/

    I think it would make a nice addition to YUI :D

    Dav

  2. Writing HTML From JavaScript at 925 HTML on April 15th, 2009 at 5:07 PM says:

    […] fed up with either alternative and decide to create a new API for writing markup in JavaScript: Jeethu: “One of the sweetest parts of Mochikit IMO has been Mochikit.DOM. This is something which […]

  3. Andrew Warner on April 17th, 2009 at 11:15 AM says:

    This reminds me of some dom builder code I lifted from the original del.ici.ous site before it was overhauled by yahoo.
    The implementation is almost the same except it wasn’t encapsulated in a single object, but had some shortcut functions:
    $DIV ({style:{margin:’2px’}},
    $SPAN({style:{color:’white’,’background-color':’#aa0011′,padding:’2px’}}, ‘You entered: ‘+s)
    )

  4. Jeethu on April 19th, 2009 at 12:26 AM says:

    @Dav, I have absolutely no experience with git (Worked almost exclusively on mercurial and before that darcs), I’ve forked the repo on github and am learning the basics git, once I’m done with that, I’ll make a YUI module and submit a pull request.

  5. In the Wild for April 23, 2009 » Yahoo! User Interface Blog on April 23rd, 2009 at 5:22 PM says:

    […] and methods exposed by the current API.” Check out the full article/tutorial on Carousel here.Jeethu Rao, “A Mochikit-style Dombuilder for YUI”: Writes Jeethu: “Before moving to YUI about a year ago, I was using Mochikit as my primary JS […]

  6. In the Wild for April 23, 2009 | rapid-DEV.net on June 15th, 2009 at 4:27 AM says:

    […] Jeethu Rao, “A Mochikit-style Dombuilder for YUI”: Writes Jeethu: “Before moving to YUI about a year ago, I was using Mochikit as my primary JS library. As advertised, Mochikit happens to be one of the most pythonic javascript libraries ever. One of the sweetest parts of Mochikit IMO has been Mochikit.DOM. This is something which I’ve always missed with YUI. innerHTML is fast, but icky and it feels a little inelegant. So, I ended up writing something like Mochikit.DOM for YUI while writing Tagz. Thought it might be useful to others as well. So, here’s the mercurial repo with the code.” Check out the full blog post here. (Original source.) […]

Leave a Reply