Comments on: Introducing: JSHTML

By: Mike

Mike — Sat, 17 Oct 2009 14:10:37 +0000

I think this has potential. Keep up the good work James :D.
If you do take this further with the templating idea – Smarty for php might be a good idea to take a look at. It’s a fairly well done (imo) template library for php, some features might be adoptable from it.

By: Kris

Kris — Tue, 29 Sep 2009 20:34:51 +0000

Think of the CSS implications of this. Properties that do not validate or are not consistent between browsers could be expressed in this way. Examples would include border-radius and opacity.

By: Stijn

Stijn — Wed, 05 Aug 2009 09:27:49 +0000

Found a solution (should have more confidence in myself :-). If you use the createComment() method, everything works just fine!

x = document.createComment('JSHTML test'); document.body.appendChild(x); JSHTML.parse();

By: Stijn

Stijn — Wed, 05 Aug 2009 09:20:17 +0000

This is a great feature you're introducing here (to me anyway :-). But I was wondering if it's possible to create new HTML comments in the DOM, and parse them afterwards with JSHTML. I was trying to generate comments with jquery with the 'after' method and perform the parsing, but with no result:


 JSHTML.config.delimiters = ['',''];
 $('#foo').after('<!-- JSHTML bar -->');
 JSHTML.parse();

By: LX

LX — Mon, 27 Apr 2009 16:16:33 +0000

One of the most used techniques is putting a script tag first into body which adds the class “jsEnabled” to the body tag and use CSS to hide/show those elements which should only be shown if JavaScript is enabled.

About your example: this is one of the reasons people choose to use the appendDom-Plugin – but it is far from being more readable. Yet, if you want readability, just use multiple strings, like in:

$('(div id="whatever")'+
      '(a href="#mylink")some Link(/a)'+
  '(/div)');

Sorry for the brackets, but the formatter seems to be erroneous; please replace them with HTML code. Anyway: Marvellous how the code is readable now, isn’t it? And you don’t have to waste as much time parsing the whole page for comments and DOM rebuilding.

Greetings, LX

By: ken

ken — Fri, 17 Apr 2009 19:20:58 +0000

This is interesting, but I don’t find it particularly useful in its current state, it just seems really limited in what it can do. I am still leaning towards Resig’s “micro-templating” approach, as demonstrated here:

http://ejohn.org/blog/javascript-micro-templating/

By: xrado

xrado — Thu, 16 Apr 2009 11:38:26 +0000

..and Domplate used in/by firebug i think

http://www.christophdorn.com/Blog/2008/09/07/domplate-debug-logging/

By: Raj

Raj — Wed, 15 Apr 2009 19:47:41 +0000

Nice work, but in principle something like this has been around for a long time. I think the Trimpath template is a similar concept, no?

If my memory serves me right, in the case of Trimpath the templates are tucked away in hidden textareas and not in comments.

http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

By: Toby Miller

Toby Miller — Wed, 15 Apr 2009 16:39:53 +0000

Excellent Job James! I did something similar to this in MooTools last year. The biggest difference in your implementation and mine (aside from using MooTools vs jQuery) is that I’m allowing for the hidden comment to contain a Hash object rather than just HTML content. This Hash object can then be used to extend the element that the comment is a direct child of. The advantage to this route is that you are not restricted to only extending HTML markup. You can extend events, classes, styles, properties, attributes, text and html.

You can see it generally described and used here:
http://www.tobymiller.com/articles/mootools_enhanced_elements/index.php

Maybe you could adopt some of these additional features into your solution. My primary need for this is to support web page features that need to work regardless of the presence of JavaScript (i.e. screen readers, search engines, locked down corporate environments, etc). You can really do a lot of cool things with this methodology.

By: Jeethu Rao

Jeethu Rao — Wed, 15 Apr 2009 16:02:40 +0000

@Robert Samuel Clay: You should look at Mochikit.DOM and probably my YUI port of the same for a cleaner (IMO, since it involves less typing) way to do the same.