Laconic: A Sane Method of Generating DOM Content in JavaScript

Your API will explode violently in IE Using `Object.prototype.toString.call` is also a pretty dirty hack, especially to detect an "array". I think `typeof obj === "object" && obj.length` would suffice, even if certain false positives like string objects leak through.

[0]: http://i.imgur.com/RNBYd.png

[1]: http://msdn.microsoft.com/en-us/library/dd347148(v=VS.85).as...

Re: Laconic: A Sane Method of Generating DOM Content in JavaScript

#5

Post by maratd » Thu, Apr 26, 2012, 4:02 AM UTC

I simply generate global functions corresponding to tags, so my stuff looks like this:

  div(span('hello world')).inject(document.body);

Very simple to do and even simpler to use.

Re: Laconic: A Sane Method of Generating DOM Content in JavaScript

#6

Post by firefoxman1 » Thu, Apr 26, 2012, 4:04 AM UTC

This is really neat. The coolest part is being able to register your own "tags" which take any arguments you want.

The problem I see is that this only works for "all known HTML tags." If you want to use custom tags, like (I believe that's what meteor uses), this won't cut it since it uses $.el.tagname syntax, every tag has to be loaded into the $.el object.

How about a very similar, more jQuery-like syntax instead:

   $.el('template', [
     $.el('div', {'class' : 'foo'}, [
       //other children here
       //so basically, the last arg is always an array of children
     ]
   ]);

Re: Laconic: A Sane Method of Generating DOM Content in JavaScript

#7

Post by [deleted] » Thu, Apr 26, 2012, 4:07 AM UTC

mkmcdonald wrote: post #4

Your API will explode violently in IE Using `Object.prototype.toString.call` is also a pretty dirty hack, especially to detect an "array". I think `typeof obj === "object" && obj.length` would suffice, even if certain false positives like string objects leak through. [0]: http://i.imgur.com/RNBYd.png [1]: http://msdn.microsoft.com/en-us/library/dd347148(v=VS.85).as...

[deleted]

Re: Laconic: A Sane Method of Generating DOM Content in JavaScript

#8

Post by joestelmach » Thu, Apr 26, 2012, 4:12 AM UTC

firefoxman1 wrote: post #6

This is really neat. The coolest part is being able to register your own "tags" which take any arguments you want. The problem I see is that this only works for "all known HTML tags." If you want to use custom tags, like (I believe that's what meteor uses), this won't cut it since it uses $.el.tagname syntax, every tag has to be loaded into the $.el object. How about a very similar, more jQuery-like syntax instead: $…

Though I did a poor job at documenting it, $.el is actually a function that accepts a tag name as the first parameter. The following two snippets are equivalent:

  $.el.div({className : 'foo'});

  $.el('div', {className : 'foo'});

Re: Laconic: A Sane Method of Generating DOM Content in JavaScript

#9

Post by joestelmach » Thu, Apr 26, 2012, 4:15 AM UTC

maratd wrote: post #5

I simply generate global functions corresponding to tags, so my stuff looks like this: div(span('hello world')).inject(document.body); Very simple to do and even simpler to use.

Many would frown upon polluting the global name space with functions corresponding to all known HTML tags.

Re: Laconic: A Sane Method of Generating DOM Content in JavaScript

#10

Post by aneth » Thu, Apr 26, 2012, 4:15 AM UTC

This is pretty, but unfortunately the only performant way to generate dom elements in javascript is with HTML. HTML parsing is orders of magnitude faster in most browsers.

How about a library like this to generate a string of HTML instead of dom elements?