I have a problem using the jQuery template in the same way as a regular jQuery class DOM object. I need to modify the HTML created by the template function before adding it to the DOM.
The comments in my example below explain what I want to do and what is wrong.
<script id="movieTemplate" type="text/x-jquery-tmpl">
<tr class="week_${week}">
<td colspan="6">Vecka: ${week}</td>
</tr>
<tr class="detail">
<td>Kund: ${customer}</td>
<td>Projekt: ${project}</td>
<td>Tidstyp: ${time_type}</td>
<td>Datum: ${date}</td>
<td>Tid: ${quantity}</td>
<td>Beskrivning: ${description}</td>
</tr>
</script>
<script type="text/javascript">
var movies = [
{ customer: "SEMC", project: "Product catalogue", time_type: "Programmering", date: "2010-11-08", quantity: 2, description: "buggar", week: 45 },
{ customer: "SEMC", project: "Product catalogue", time_type: "Programmering", date: "2010-11-09", quantity: 3, description: "buggar igen", week: 45 }
];
$("#movieTemplate").tmpl(movies).appendTo("#movieList");
$("#btnAdd").click(function () {
var data = { customer: $("#clients").val(), project: $("#projects").val(), time_type: $("#timeTypes").val(), date: $("#date").val(), quantity: $("#quantity").val(), description: $("#description").val(), week: $("#week").val() }
var html = $("#movieTemplate").tmpl(data).find(".week_" + data.week).remove().appendTo("#movieList");
console.log(html.html());
var html = $("#movieTemplate").tmpl(data).appendTo("#movieList");
console.log(html.html());
return false;
});
</script>
source
share