jQuery-mobile плохо работает с jQuery-tmpl?

Question

Есть ли причина, по которой тот же шаблон и JavaScript

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

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

будет работать как описано со следующей разметкой jqtouch:

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

но в результате шаблон будет отображаться вне (после) неупорядоченного списка со следующей разметкой jquery-mobile?

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

Я понимаю, что jquery-mobile находится в альфа-версии, но до сих пор работала хорошо, и я бы предпочел не переключаться на jqtouch на этом этапе. Кто-нибудь видел такое поведение и нашел обходной путь?

Answer 1

Вам нужно вызвать метод обновления представления списка, как только ваш шаблон будет готов.

$ ( "yourUl") ListView ( "обновить"). В случае, если метод .page () никогда не вызывался, вы можете захотеть сделать что-то подобное.

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

Answer 2

Это было исправлено в альфа-версии 2. См. Здесь: http://jquerymobile.com/demos/1.0a2/#docs/lists/docs-lists.html (прокрутите вниз до «Обновление списков»)

Answer 3

Это должно выглядеть так:

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

Вам нужен .page () в конце.