2

I'm not sure if I'm asking the right question or not. But my application heavily relies on Javascript and jQuery to create HTML document. So I have a lot of this "jQuery(") and then a lot of div.attr("id","123").

So, is there a better way to do this, or some design pattern to deal with this?

Thanks a lot.

toy
  • 11,711
  • 24
  • 93
  • 176
  • If you want a tchnology that is proven and available in browsers back to IE6, then look at XSLT. You can load an XML document via xmlHTTPRequest, apply an transform to turn it into HTML and insert it into the document. It takes just a few lines of code (the AJAX part is only a few lines of code too, use jQuery if you must). It's well documented, available in all modern browsers, is native to the browser so very fast and doesn't require any additional library so it's very portable. It's also supported by a large number of non-browser environments. – RobG Sep 28 '11 at 23:57
  • Some useful links for XSL Transforms: [Mozilla documentation for W3C compliant browsers](https://developer.mozilla.org/en/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations), [Microsoft documentation for IE and clones](http://msdn.microsoft.com/en-us/library/ms762796(VS.85).aspx) – RobG Sep 29 '11 at 00:13
  • 1
    Oh, man, don't get me started on XSLT. Firefox doesn't support autoescaped HTML (http://stackoverflow.com/q/2175678/901048), Chrome doesn't support @includes (http://stackoverflow.com/q/2042178/901048), and IE seems to do whatever it feels like doing. Not to mention that it seems to use its own unique language, using syntax like "choose" and "when" instead of "case/switch" or "if/then" like every other programming language. XSLT was a good idea which failed to take off and has been neglected by browser developers for years – Blazemonger Sep 29 '11 at 12:40

1 Answers1

3

Yes, jQuery Templates. They make it easier to build html with jQuery, you can do:

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    <li><b>${Name}</b> (${ReleaseYear})</li>
</script>

<ul id="movieList"></ul>

<script>
var movies = [
    { Name: "The Red Violin", ReleaseYear: "1998" },
    { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
    { Name: "The Inheritance", ReleaseYear: "1976" }
];

/* Render the template with the movies data and insert
   the rendered HTML under the "movieList" element */
$( "#movieTemplate" ).tmpl( movies )
    .appendTo( "#movieList" );
</script>

And get:

  • The Red Violin (1998)
  • Eyes Wide Shut (1999)
  • The Inheritance (1976)
amosrivera
  • 26,114
  • 9
  • 67
  • 76
  • ...for a given value of "easier". If you want to do anything other than basic Mad-Libs-style templates, jQuery's `tmpl` can get mighty confusing. Plus they're still considered beta, so the documentation isn't nearly as good as it ought to be. I'm not opposed to them, mind you -- but using them effectively is like learning a whole new language. – Blazemonger Sep 28 '11 at 23:26
  • @mblase75 If your application heavily relies on js as question mentions it might be worthwhile learning how to use it. – amosrivera Sep 28 '11 at 23:36
  • @amosrivera - better to learn an existing, mature technology supported natively by the browser like XSLT. – RobG Sep 28 '11 at 23:58
  • @RobG a lot of the jQuery plug ins used now days do not have a year of life nor have been developed by the jQuery team itself. Also knowing that will indeed be in the next jQuery versions it is not a waste to learn how to use it. – amosrivera Sep 29 '11 at 00:10
  • @amosrivera - precisely my point. You can learn something that hasn't been around long, may go away, might be supported, might morph into something else and only works in a limited number of browsers if you first load 100kb of library. Or you can learn a mature technology that works now, is well documented, well understood, very widely supported, is implemented natively in all modern browsers, is supported by standards and portable across systems and environments. The choice is pretty clear to me. – RobG Sep 29 '11 at 00:39
  • @RobG You sound so convincing i will have to check it out. Lets see it as an answer then.. – amosrivera Sep 29 '11 at 01:47