Usando modelos jQuery compostos externos
Eu queria experimentar os modelos jQuery depois de me inspirar nessas 2 postagens no blog
http://encosia.com/2010/11/10/composition-with-jquery-templates-why-and-how/http://encosia.com/2010/10/05/using-external-templates-with-jquery-templates/Bem, não está funcionando bem para mim. Se eu tiver o código do modelo na própria página, ele funcionará bem, mas carregar remotamente não funcionará para mim. Parece que o modelo está sendo recuperado ok. o que há de errado aqui?
Modelo externo:
<script id="contactsTemplate" type="text/x-jquery-tmpl">
<table class="contacts">
<thead><tr><td class="ui-helper-hidden">Id</td><td>Name</td><td>City</td><td>State</td></tr></thead>
<tbody>
{{each contact}}
{{tmpl($value) '#contactTemplate'}}
{{/each}}
</tbody>
</table>
</script>
<script id="contactTemplate" type="text/x-jquery-tmpl">
<tr><td class="ui-helper-hidden">${id}</td><td>${name}</td><td>${city}</td><td>${state}</td></tr>
</script>
Na minha página, estou usando esse código para recuperar e carregar o modelo:
var contacts = {
contact: [
{ id: 1, name: "John Green", city: "Orange Beach", state: "AL" },
{ id: 2, name: "Sam Thompson", city: "Pensacola", state: "FL" },
{ id: 3, name: "Mary Stein", city: "Mobile", state: "AL" }
]
};
$("#ShowDataRemote").button().click(function() {
$.get('templates/Contact.htm', function(template) {
alert(template);
$.tmpl(template, contacts).appendTo("body");
alert("async done");
});
});
Atualizar:Uma nova postagem no blog sobre Encosia explica esta pergunta e resposta ...
http://encosia.com/2010/12/02/jquery-templates-composite-rendering-and-remote-loading/