Trennung von HTML und Javascript

[cd_brenner]

Hallo Community,

habe zur Zeit ein Problem mit relativ aufwändigen HTML-Code, den ich via AJAX nachladen will. Bis jetzt wurde der HTML-Code am Server generiert (schön ordentlich getrennt nach dem MVC-Prinzip) und dann nachgeladen.
Nun möchte ich aber nur alle relevanten Daten XML-formatiert laden, und muss daher das Zusammenbauen der HTML-Ansicht clientseitig via Javascript erledigen.

Sieht aktuell ca. so aus:
CODE $(".memo_newmemo_autofill_content").append(' <div class="memo_newmemo_autofill_item" onclick="memo_newmemo_autofill_click(this);"><div class="memo_newmemo_autofill_userimg" style="background-image: url('+user_img+');"></div><div class="memo_newmemo_autofill_username">'+user_name+'</div><div style="clear: both;"></div></div> ');


Bei kleinen Codepassagen gerade noch verkraftbar, aber was mache ich bei längeren, komplexeren HTML-Abschnitten?
Wie würde sich eine Template-Engine machen, die das Template aus dem DOM einliest, und mit Suchen&Ersetzen die Daten einfügt?
So wäre es zu Mindest einfach, den vorhandenen Code zu warten. Das kann bei ewig langen JS-Strings echt stressig werden.

Vielleicht habt ihr dazu ein paar Tipps,
vielen Dank,
Markus

 

[cd_brenner]

Hier mal ein kleiner Entwurf, der mir schon recht gut gefällt:

CODE
function template_engine(template_id, array_search, array_replace)
{

var template = $("#"+template_id).html();

for (var i = 0; i < array_search.length; i++)
{

var search = array_search[i];
var regex = new RegExp("{"+search+"}", "g");
var replace = array_replace[i];
template = template.replace(regex, replace);

}

return template;

}

function test_engine()
{
var search = new Array("id", "human_time", "username", "user_img", "via_title", "message");
var replace = new Array(1, "20:15", "Neo", "public/user_imgs/neo.jpg", "It Works", "Small JS-Template Engine");

var layout = template_engine("post_template", search, replace);

$("#temp_in").html(layout);
}