Handling JSON and HTML templates in jQuery

Question

How do you handle templating HTML and JSON without locking the HTML into javascript strings?

I have an ajax-enabled site that presents a lot of dynamic content by interpolating JSON values with HTML. This all works fine.

BUT it means I have significant amounts of HTML all through my JavaScript. For example:

var template = "<div>Foo: {bar}</div><div>Blah: {vtha}</div>";          
template.interpolate({bar:"bar",blah:"vtha"});

I have cut this down a fair bit - some of my dynamic elements have quite a lot of HTML and a lot going on.

I am using jQuery and I am building on Rails, so if there is something smart in either framework, that would be great.

For reference, the String interpolation function used above is:

String.prototype.interpolate = function (o) {
    return this.replace(/{([^{}]*)}/g,
        function (a, b) {
          var r = o[b];
          return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

So... what's the question? Are you asking how to do this without locking the HTML into javascript strings? — Peter Bailey
– Peter Bailey, Commented Apr 19, 2010 at 13:58
That interpolation is a potential security problem. Because it's not HTML-escaping text strings, any untrusted input you end up putting on the page can inject markup (including JavaScript) into your page's security context. You have made a client-side XSS risk. — bobince
– bobince, Commented Apr 19, 2010 at 14:14

Jens Roland · Accepted Answer · 2011-01-24 09:29:47Z

1

I would definitely use the approach "Load when needed".

Build small widget that you can load with ajax that's complete with html, data and so on. Use jquery's load function.

$('#wrapper').load('/widgets/foobar/')

And have the server create all your elements you need. It will be some more loading of data for each widget. But you don't have to create them on client side. I would say the pro out weight the cons in this. Since it will be easier for the client just to add already parsed html instead of building it up in javascrtipt.

edited Jan 24, 2011 at 9:29

Jens Roland

27.8k15 gold badges86 silver badges105 bronze badges

answered Apr 19, 2010 at 14:01

fredrik

17.6k9 gold badges57 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kernel James · Accepted Answer · 2012-02-19 13:01:01Z

0

Have you tried using Distal templates that allows you to define the template as HTML.

answered Feb 19, 2012 at 13:01

Kernel James

4,1421 gold badge32 silver badges40 bronze badges

Comments

Drew · Accepted Answer · 2017-12-14 20:37:34Z

0

If you want to keep the HTML template code in the HTML and out of the JavaScript then just do something like this.

Javascript:

$(document).ready(function() { var template = $('#template-example').html(); template.interpolate({bar:"bar",blah:"vtha"}); });

HTML:

<div id="template-example" style="display:none;"> <div>Foo: {bar}</div><div>Blah: {vtha}</div> </div>

answered Dec 14, 2017 at 20:37

Drew

4,3934 gold badges28 silver badges42 bronze badges

Collectives™ on Stack Overflow

Handling JSON and HTML templates in jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related