jQuery-mobile does not play well with jQuery-tmpl?

Question

Is there any reason why the same template and JavaScript

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

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

would work as documented with the following jqtouch markup:

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

but result in the template getting rendered outside (after) the unordered list with the following jquery-mobile markup?

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

I realize jquery-mobile is in alpha release, but it has been working nicely so far and I'd prefer not to switch to jqtouch at this stage. Has anyone seen this behavior and found a workaround?

Answer 1

You need to call the refresh method of the listview once your templating is done.

$("yourUl").listview("refresh"); In case .page() method has never been called you may want to do something like this.

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

Answer 2

This has been fixed in alpha 2. See here: http://jquerymobile.com/demos/1.0a2/#docs/lists/docs-lists.html (scroll down to 'Updating lists')

Answer 3

It should look like

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

you need the .page() at the end.