jquery template - jumate de MVC

Nu odata am scris ceva asemanator cu aceste cond in jQuery:

var sablon = "<b> ${nume} </b>";

Problema la acest template este modul in care se poate manipula . In cazul in care dorim sa facem o modificare, suntem nevoiti sa cautam in cod unde avem definit template-ul si sa facem modificari pe el. In cazul in care un nou dezvoltator trebuie sa faca modificari, el o sa fie nevoit sa cauta in cod.

O solutie este sa folosim un template pentru acest lucru. Primul pas este sa definim template-ul in forma urmatoare:

<script id="numeTemplate" type="text/html">
     <b> ${nume} </b>
</script>

Prin acest mod, o sa ne putem referi template-ul nostru in orice loc din cod pe baza unui ID, totodata o sa fie foarte usor de grupat toate template-urile.

Urmatorul pas este sa referim pe langa libraria de jquery si libraria pentru template-uri. Numele ei este: jquery.tmpl.js.

Template-ul pe care l-am definit mai sus trebuie putin modificat, forma sa trebuie sa fie:

<script id="numeTemplate" type="text/html">
     <b> ${nume} </b>
</script>

JSON va scoate automat valoarea pentru nume prin ${}. Putem sa avem orice fel de conditii logice, in exemplul dat mai sus, avem un IF care afiseaza imagini diferite pentru barbati si femei. Prin acest mecanism putem sa cream template-uri complexe, in care logica care defineste modul in care se face randarea la anumite elemente din template sa fie in interiorul la template.
Datele pentru care facem randarea sunt:

var persoane = [
     { Nume = "Stefan", IsMan = 1},
     { Nume = "Oana", IsMan = 0},
     { Nume = "Mihai", IsMan = 1}
];

Pentru a putea folosi template-ul definit, putem sa folosim functiile

• tmpl([data],[options])
• $.tmpl(template,[data,[options])

Pentru exemplul dat mai sus ar trebuii sa scriem:

$("numeTemplate").tmpl(persoane).appendTo("#listaPersoaneDiv")

Unde listaPersoaneDiv reprezinta id la divul care afiseaza template-ul.
Si gata, in acest moment avem un template pe care il putem folosi in orice locatie. Putem sa privim totul ca o jumatate din MVC, doar partea de Model-View.
Pentru mai multe informatii: http://api.jquery.com/jQuery.template/