Rendering JavaScript templates

Question

I wish to display a popup when the user hovers over a particular link.

To do so, I first request the particular JSON data from the server via Ajax.

The server queries the DB, and escapes any data which happens to be user provided using htmlspecialchars(), and echos json_encode($data).

The client then assembles the HTML using the below template.

The client then displays the popup.

My question only relates to rendering the template.

Is there a better approach which will provide one or all of the following benefits?

Templates are more readable.
Templates are easier to maintain.
Templates can be extended.
Custom methods to display phone numbers, etc need not be created.
Site is safer from an XSS respective.
htmlspecialchars escaping is moved from the server to the client.
Other benefits which I have not even thought of?

Thank you

function getTemplate(type,json) {
    switch(type) {
        case 'person':
            return '<dl><dt>Name:</dt><dd>'+((d.firstname&&json.lastname)?json.firstname+' '+json.lastname:((json.firstname)?json.firstname:json.lastname))+'</dd>'
            +'<dt>Account:</dt><dd>'+json.account_name+'</dd>'
            +((json.title)?'<dt>Title:</dt><dd>'+json.title+'</dd>':'')
            +'<dt>User Name:</dt><dd>'+json.username+'</dd>'
            +'<dt>Password:</dt><dd>'+json.password+'</dd>'
            +'<dt>Communication Method:</dt><dd>'+json.communication_method+'</dd>'
            +((json.email)?'<dt>Email:</dt><dd>'+json.email+'</dd>':'')
            +((json.account_phone)?'<dt>Account Phone:</dt><dd>'+ayb.display_phone(json.account_phone)+'</dd>':'')
            +((json.phone)?'<dt>Direct Phone:</dt><dd>'+ayb.display_phone(json.phone)+'</dd>':'')
            +((json.mobile_phone)?'<dt>Mobile Phone:</dt><dd>'+ayb.display_phone(json.mobile_phone)+'</dd>':'')
            +((json.account_fax)?'<dt>Account Fax:</dt><dd>'+ayb.display_phone(json.account_fax)+'</dd>':'')
            +((json.fax)?'<dt>Direct Fax:</dt><dd>'+ayb.display_phone(json.fax)+'</dd>':'')
            +((json.address || json.location)?'<dt>Address:</dt><dd>'+json.address+((json.address && json.location)?'<br>':'')+json.location+'</dd>':'')
            +'</dl>';
            break;
        case 'company':
            return 'bla bla bla';
            break;
        case 'somethingElse':
            return 'bla bla bla';
            break;
            return '<h1>Invalid Template</h1>';
    }
}

@jQueryAngryBird Don't know what it is. Is angular js similar to Mustache and HandlebarsJS? I will investigate. — user1032531
– user1032531, Commented Oct 13, 2014 at 12:25
htmlspecialchars() does not escape anything. It converts characters to html entities. addslashes() or mysqli_escape_string() are what you would use to escape characters. — Brian
– Brian, Commented Oct 13, 2014 at 12:27
@jQueryAngryBird AngularJS looks like a very powerful framework, and I will strongly consider using it on future projects. For now, however, I just want to better render some templates. — user1032531
– user1032531, Commented Oct 13, 2014 at 12:54

Ammaroff · Accepted Answer · 2014-10-13 14:05:20Z

1

Here is one using mustache.js :

http://plnkr.co/m0NyrpTcKhIicTt0FD4N

html:

<dl><dt>Name:</dt><dd>{{firstname}} {{lastname}} </dd>
<dt>Account:</dt><dd>{{account_name}}</dd>
{{#title}}
    <dt>Title:</dt><dd>{{title}}</dd>
{{/title}}
<dt>User Name:</dt><dd>{{username}}</dd>
<dt>Password:</dt><dd>{{password}}</dd>
<dt>Communication Method:</dt><dd>{{communication_method}}</dd>
{{#email}}
    <dt>Email:</dt><dd>{{email}}</dd>
{{/email}}
{{#account_phone}}
    <dt>Account Phone:</dt><dd>{{#display_phone}}{{account_phone}}{{/display_phone}}</dd>
{{/account_phone}}
</script>

<script type="text/html" id="company">
bla bla
</script>
<script type="text/html" id="somethingElse">
somethingElse bla bla
</script>

json :

  var json = {
        "firstname": "Basha",
        "lastname": "tasha",
        "account_name":"presonal",
        "title":"MR",
        "username":"basha",
        "password":"******",
        "communication_method":"phone<b>xss safe</b>",
        "account_phone": "1231231234"
    };

js:

$(document).ready(function () {
var output = $("#output");
type = "person";
var template = $("#"+type).html();

if(template == undefined) template = "<h1>Invalid Template</h1>";

//you can inject client side callback for phone render before calling Mustache.render(template,json)

  json.display_phone= function () {
   return function (val, render) {
       var phone = render(val);
            return phone.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');

        }
    };
    var html = Mustache.render(template, json);

    output.append(html);

 });

It's XSS safe

Kindly note that custom method is sent in the json data "display_phone"

edited Oct 13, 2014 at 14:05

answered Oct 13, 2014 at 13:02

Ammaroff

9527 silver badges22 bronze badges

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

4 Comments

user1032531 Over a year ago

Thank you Ammaroff, Is the call back for the phone typically handled client side? For instance, client converts JSON to object, and then overrides that property? Or does the server create the JS object with the callback directly.

Ammaroff Over a year ago

Yes the callback is handled from client side. you can inject display_phone in the json after getting it from the server, I updated the solution above.

Ammaroff Over a year ago

I updated the solution you can visit the updated link in my answer

Ammaroff Over a year ago

the latest plunker link in my updated answer is showing how to get json from server

Collectives™ on Stack Overflow

Rendering JavaScript templates

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related