Is it ok to use HTML strings in JS code while using jquery templates

Question

In our app we use javascript to pump the incoming JSON data into presentable HTML. I've ben using JQuery template for this. I have begun to notice that I've been using more and more html Strings In JS code. for ex:

render = function(data, parent){

   var header, analyticsHtml, analyticsTmpl;
   header= parent.find(".header");
   header.append('<H3>'+ i18n['header']+'</H3>');
   analyticsHtml = '<div><div class="floatLeft" id="analytics"><div class="gt"><span>01</span><br />i18n['Text1']</div></div></div>';
   parent.append(analyticsHtml);
   analyticsTmpl = "....blah...";

   $('#analytics').append($.tmpl(analyticsTmpl, data));
   .
   .
   .

}

Is it ok to use html strings within JS code?

Answer 1

Yes, it's OK, but you have to escape the quote characters you use with "\\".

analyticsHtml = '<div><div class="floatLeft" id="analytics"><div class="gt"><span>01</span><br />' + i18n['Text1'] + '</div></div></div>';

In your code, you forgot the "+" operators for the "i18n" array reference.

Answer 2

I'd say it's fine to do that. Something I do is to try to define the templates in a non-local variable at the top of the class/codefile/closure, and if they're long, split them over multiple lines to make it more readable,