Comments on: Introducing: JSHTML http://james.padolsey.com/javascript/introducing-jshtml/ Just another WordPress weblog Mon, 08 Mar 2010 01:21:27 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Mike http://james.padolsey.com/javascript/introducing-jshtml/comment-page-1/#comment-22415 Mike Sat, 17 Oct 2009 14:10:37 +0000 http://james.padolsey.com/?p=749#comment-22415 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. 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 http://james.padolsey.com/javascript/introducing-jshtml/comment-page-1/#comment-21291 Kris Tue, 29 Sep 2009 20:34:51 +0000 http://james.padolsey.com/?p=749#comment-21291 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. 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 http://james.padolsey.com/javascript/introducing-jshtml/comment-page-1/#comment-17643 Stijn Wed, 05 Aug 2009 09:27:49 +0000 http://james.padolsey.com/?p=749#comment-17643 Found a solution (should have more confidence in myself :-). If you use the createComment() method, everything works just fine! <code> x = document.createComment('JSHTML test'); document.body.appendChild(x); JSHTML.parse(); </code> 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 http://james.padolsey.com/javascript/introducing-jshtml/comment-page-1/#comment-17642 Stijn Wed, 05 Aug 2009 09:20:17 +0000 http://james.padolsey.com/?p=749#comment-17642 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: <code> JSHTML.config.delimiters = ['','']; $('#foo').after('<!-- JSHTML bar -->'); JSHTML.parse(); </code> 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 http://james.padolsey.com/javascript/introducing-jshtml/comment-page-1/#comment-10674 LX Mon, 27 Apr 2009 16:16:33 +0000 http://james.padolsey.com/?p=749#comment-10674 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: <pre lang="javascript"> $('(div id="whatever")'+ '(a href="#mylink")some Link(/a)'+ '(/div)'); </pre> 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 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 http://james.padolsey.com/javascript/introducing-jshtml/comment-page-1/#comment-10212 ken Fri, 17 Apr 2009 19:20:58 +0000 http://james.padolsey.com/?p=749#comment-10212 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/ 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 http://james.padolsey.com/javascript/introducing-jshtml/comment-page-1/#comment-10072 xrado Thu, 16 Apr 2009 11:38:26 +0000 http://james.padolsey.com/?p=749#comment-10072 ..and Domplate used in/by firebug i think http://www.christophdorn.com/Blog/2008/09/07/domplate-debug-logging/ ..and Domplate used in/by firebug i think

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

]]> By: Raj http://james.padolsey.com/javascript/introducing-jshtml/comment-page-1/#comment-10026 Raj Wed, 15 Apr 2009 19:47:41 +0000 http://james.padolsey.com/?p=749#comment-10026 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 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 http://james.padolsey.com/javascript/introducing-jshtml/comment-page-1/#comment-10013 Toby Miller Wed, 15 Apr 2009 16:39:53 +0000 http://james.padolsey.com/?p=749#comment-10013 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. 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 http://james.padolsey.com/javascript/introducing-jshtml/comment-page-1/#comment-10010 Jeethu Rao Wed, 15 Apr 2009 16:02:40 +0000 http://james.padolsey.com/?p=749#comment-10010 @Robert Samuel Clay: You should look at <a href="http://mochikit.com/doc/html/MochiKit/DOM.html" rel="nofollow">Mochikit.DOM</a> and probably my YUI <a href="http://jeethurao.com/blog/?p=156" rel="nofollow">port</a> of the same for a cleaner (IMO, since it involves less typing) way to do the same. @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.

]]>