Beginning to play with MochiKit

I haven’t written any JavaScript for years. The only lingering memory was of pain–pain to find information, pain to use the API, pain to debug… There were probably a few more pains, but I’ve managed to successfully repress those memories. So, why return? Well, I want to some day be able to debunk the AJAX hype in any discusion I partake in :-)

MochiKit is used in turbogears to make the life of a “web developer” easier. Given the comments on the turbogears site I tought I’d take a quick look at it… I was surprised. There was a lot less pain this time.

Of course I started with some silly experiments. First off playing with the DOM tree a little. The HTML part ended up like this:

<html>
  <head>
    <title>Experiment 1</title>
    <script type="text/javascript"
            src="MochiKit-1.1/lib/MochiKit/Base.js"></script>
    <script type="text/javascript"
            src="MochiKit-1.1/lib/MochiKit/Iter.js"></script>
    <script type="text/javascript"
            src="MochiKit-1.1/lib/MochiKit/DOM.js"></script>
    <script type="text/javascript"
            src="exp01.js"></script>
  </head>

  <body>
  <table id="theTable">
  </table>
  <a href="#" onclick="addEntry();">Add entry</a>

  <div id="theText">
  </div>
  <a href="#" onclick="addText();">Add text</a>
  </body>
</html>

Nothing really exciting there. Here’s the two toy functions:

var i = 0

function addEntry() {
    var row = TR(null,
        TD(null, 'Hello'),
        TD(null, i));
    row.id = 'row' + i
    appendChildNodes('theTable', row);
    i += 1;
}

function addText() {
    var txt = getElement('theText');
    if (txt.text) {
        txt.text += ' Hello';
    } else {
        txt.text = 'Hello';
    }
    replaceChildNodes(txt, P(null, txt.text));
}

Wonderfully easy to navigate and modify the DOM tree.

Well, this was somewhat silly. Hopefully there’ll be something more interesting to write about soon enough.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>