Comments on: Making creating DOM-based applications less of a hassle

By: kolev

kolev — Sat, 23 Aug 2008 06:14:59 +0000

I personally like EJS the most! Templates are compiled into JavaScript and it's just great!

By: gancelot

gancelot — Thu, 21 Aug 2008 16:52:32 +0000

ExtJS also has a great built-in solution called XTemplate for doing this that’s worth looking at also.
http://extjs.com/deploy/dev/docs/?class=Ext.XTemplate

By: AdrenalinMd

AdrenalinMd — Thu, 21 Aug 2008 09:39:39 +0000

It’s great to have small solution like this so we can use it any framework we want, thanks for sharing.

By: sos

sos — Thu, 21 Aug 2008 08:22:01 +0000

More Dojo plugging – Dojo also has an implementation of the Django templating language, dojox.dtl. This is an extremely powerful template engine that, similar to this one, creates the HTML once, then updates it when the data changes.

You simply update the data, call the template.render method, and the HTML is updated – no creating nodes repeatedly, no innerHTML or nodeValue access.

By: jdalton

jdalton — Thu, 21 Aug 2008 00:07:09 +0000

I dig it :). Maybe viewsHandler.add could be absorbed by viewsHandler.define (they seem to be called 1 after another consistently) . For example if “define” is called and the element has not been “add”‘ed then auto add it. Also viewsHandler may benefit from chaining:
viewsHandler.create(…).set(…).set(…);

This can be used with other frameworks which is cool too.
Good job :D

By: ilazarte

ilazarte — Wed, 20 Aug 2008 19:38:15 +0000

hmm… this makes me wonder if there’s a nice intersection between a json-like dsl for js templating and haml.. interesting post!

By: Nosredna

Nosredna — Wed, 20 Aug 2008 18:52:53 +0000

Rags, try again, you still haven’t gone to Riches.

By: maine

maine — Wed, 20 Aug 2008 18:27:13 +0000

The benefit is that for setting the data you don't need to access the DOM any longer or use innerHTML or nodeValue. You might be interested in Dojo's new Widget.attr(), too. It's a standard interface for setting/getting all widget attributes, including innerHTML of templates nodes.

By: Rags

Rags — Wed, 20 Aug 2008 17:27:24 +0000

I think, my HTML markup got filtered out. Trying again.

templateString: ''+ ''+ ''

By: Rags

Rags — Wed, 20 Aug 2008 17:24:00 +0000

Dojo framework has a concept of “templates”, which define the UI layout. The templates can have dojoAttachPoints, which can later be used to access the DOM. For ex:

templateString: ”+
”+
”

And later in the code:

this.containerNode.appendChild(whatever);

Any DOM API can be used. This approach keeps the UI separate from the code and I kind of like this approach.

By: Chris Heilmann

Chris Heilmann — Wed, 20 Aug 2008 17:16:09 +0000

Well, the problem with loading HTML documents with AHAH is that you have no handle into them – you need to use DOM scripting to find the elements to manipulate. This is where it gets expensive and slow. The benefit of this method is that you already have these pointers. It is the same with using innerHTML – it is a fast way to add content, but then you need to find the parts to manipulate. If you created them and stored pointers in variables you don’t need to do that.

By: creppie

creppie — Wed, 20 Aug 2008 17:11:29 +0000

I use html templates in hidden divs as well. Much easier to code and maintain than using DOM els and setters. Then, you should use DOM to navigate and manipulate.

By: RobFrontEndDeveloper

RobFrontEndDeveloper — Wed, 20 Aug 2008 16:24:25 +0000

Interesting solution. Another approach to this verbosity of creating JavaScript widgets etc I have found is to have a HTML document filled with all component templates (DIV structures etc) that is Jaxed into the page as and when required and of course the template components can be duplicated. Also give you a neat HTML file to maintain actual HTML code of UI components instead of re-mapping element creation in your JS code.
It’s an idea at least, works quite nice so far, sure it has some drawbacks though but I like it :)