jquery - Rendering JavaScript templates -

jquery - Rendering JavaScript templates -

i wish display popup when user hovers on particular link.

to so, first request particular json info server via ajax.

the server queries db, , escapes info happens user provided using htmlspecialchars(), , echos json_encode($data).

the client assembles html using below template.

the client displays popup.

my question relates rendering template.

is there improve approach provide 1 or of next benefits?

templates more readable. templates easier maintain. templates can extended. custom methods display phone numbers, etc need not created. site safer xss respective. htmlspecialchars escaping moved server client. other benefits have not thought of?

thank you

function gettemplate(type,json) { switch(type) { case 'person': homecoming '<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': homecoming 'bla bla bla'; break; case 'somethingelse': homecoming 'bla bla bla'; break; homecoming '<h1>invalid template</h1>'; } }

here 1 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 phone render before calling mustache.render(template,json) json.display_phone= function () { homecoming function (val, render) { var phone = render(val); homecoming 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 custom method sent in json info "display_phone"

javascript jquery templates