jquery-mobile ne joue pas bien avec jquery-tmpl?

Question

Y at-il des raisons pour lesquelles le même modèle et JavaScript ...

<script id="taskTemplate" type="text/x-jquery-tmpl"> 
    <li>${name}</li> 
</script> 

$.getJSON(url, function(data) {  
    $("#taskTemplate").tmpl(data).appendTo("#tasks"); 
}); 

... travailleraient comme documenté avec le balisage jQTouch suivant:

<ul class="rounded" id="tasks"></ul> 

... mais entraîner le modèle obtenir rendu en dehors (après) la liste non ordonnée avec le balisage jqery-mobile suivant?

<div data-role="content"> 
    <ul data-role="listview" id="tasks"></ul> 
</div><!-- /content --> 

Je me rends compte jquery mobile est en version alpha, mais il a travaillé bien jusqu'à présent et je préfère ne pas passer à jQTouch à ce stade. Est-ce que quelqu'un a vu ce comportement et a trouvé une solution de contournement?

Merci à l'avance,

Answer 1

Vous devez appeler la méthode d'actualisation de la vue de liste une fois votre création de modèle terminée.

$ ("yourUl"). Listview ("refresh"); Si la méthode .page() n'a jamais été appelée, vous pouvez faire quelque chose comme ça.

try { 
     $(yourUl).listview("refresh"); 
    } catch(e){ 
     // Well, nothing to do there 
    } 

Answer 2

Ceci a été corrigé en alpha 2. Voir ici: http://jquerymobile.com/demos/1.0a2/#docs/lists/docs-lists.html (défilement vers le bas pour 'Mise à jour des listes')

Answer 3

Il devrait ressembler à

$("#taskTemplate").tmpl(data).appendTo("#tasks").page(); 

dont vous avez besoin le .page() à la fin.