4
\$\begingroup\$

I want to ask whether my following implementation is good in the view of good practice and performance. I have an app where I have to show another page or template html in an iframe. I get that template html via ajax and render it in the iframe. Iframe must be used because the template must be isolated.I am now storing that template html in a javscript variable

var tmp;
$.get('/template/1', function(data){  tmp = $(data); });
// tmp = '<html><body>....etc...</body></html'; holds whole template

and then I have my div container in that template where I use mustache for changing content.

var render = tmp.find('#container').html();
var rendered = Mustache.to_html(render, some_data);
//then
tmp.find('#container').html(rendered);
// and add tmp to iframe

I am storing whole html in tmp so that it can be used later also and when my some_data change I again process tmp and re-render template in iframe. I may need re-render template many times later so I am storing in in variable. Is it good to store whole template html in javascript variable like that or it's better use other ways...if there are other ways what are they...

\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

I don't think this will cause you any problems; it may offer superior performance in many scenarios, especially over re-rendering the template. The only other option that comes to mind is to keep this invisibly in the DOM somewhere and use JQuery's clone() to re-render it as needed. I use this latter technique especially if the original template is pre-rendered from another source. Just bear in mind that if you do use clone() JQuery also clones element IDs if you have any, which may cause your selectors on those IDs to behave unexpectedly if you don't change them after the clone (or refactor the source template).

\$\endgroup\$
5
  • \$\begingroup\$ If it's a complex element with many nested children clone(deep) works well, however creating individual elements should be faster than cloning the same element over and over again. Doesn't look like that is what the OP is doing, but I thought this was important side note. :P \$\endgroup\$
    – rlemon
    Commented Jan 9, 2013 at 18:41
  • \$\begingroup\$ @rlemon good point and agreed. \$\endgroup\$
    – Plynx
    Commented Jan 9, 2013 at 18:45
  • \$\begingroup\$ first of all thank your discussions. It would be too long to explain my whole scenario here but I wanted to know storing whole page html string like that in a var is good for health or not !! for eg: $.get('/template/hello.html', function(data){ tmp = $(data); }); hello.html is a full web page \$\endgroup\$
    – roxxypoxxy
    Commented Jan 9, 2013 at 18:51
  • 2
    \$\begingroup\$ @roxxypoxxy well in that case it is not stored in the string, jQuery has created a 'fake' documentFragment (iirc). Basically it's now a HTML Collection wrapped in a jQuery object. If you interact with the contents of this collection a few times they yes, hold it. Reaching into the DOM for multiple updates would be more costly than holding it in memory. \$\endgroup\$
    – rlemon
    Commented Jan 9, 2013 at 18:58
  • \$\begingroup\$ hmm..that's interesting. \$\endgroup\$
    – roxxypoxxy
    Commented Jan 9, 2013 at 19:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.