Hi everyone...
I am using jQuery template with these code below:
#######HTML part#####
<script id="imageTmpl" type="text/x-jquery-tmpl">
{{if selected == 1}}
<img src="images/${image}.png" />
{{/if}}
</script>
<script id="bulletTmpl" type="text/x-jquery-tmpl">
{{if selected == 1}}
<li class="selected"></li>
{{else}}
<li></li>
{{/if}}
</script>
#####jQuery part######
//initializing variable
var chosen = 0;
var lempah_kuning =
[
{ name: "Lempah Kuning Kepala Ikan", image: "kepala-ikan", selected: 1},
{ name: "Lempah Kuning Ayam", image: "lempah-kuning-ayam-mangga", selected: 0},
{ name: "Lempah Kuning Iga", image: "lempah-kuning-iga-mangga", selected: 0},
{ name: "Lempah Kuning Ceker", image: "lempah-kuning-ceker-mangga", selected: 0},
{ name: "Lempah Kuning Udang", image: "lempah-kuning-nanas-udang", selected: 0},
{ name: "Lempah Kuning Cumi", image: "lempah-kuning-nanas-cumi", selected: 0}
];
// this is how I attach template and data to a div
$('#bulletTmpl').tmpl(lempah_kuning).appendTo('ul#bullet');
$('#imageTmpl').tmpl(lempah_kuning).appendTo('#detail');
$('ul#bullet li').click(handleMouse);
//problem is right here....
function handleMouse(e)
{
lempah_kuning[chosen].selected = 0;
chosen = $("li").index(this);
lempah_kuning[chosen].selected = 1;
how do I update jQuery template of imageTmpl based on the bullet I click? I mean reload the imageTmpl?
$("li.selected").removeClass("selected");
$("li").eq(chosen).addClass("selected");
}
I mean I have update selected of the data but how to update viewing the image because I use different template...