jqtouch - 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 处于 alpha 版本，但到目前为止它运行良好，我不想在这个阶段切换到 jqtouch。有没有人看到这种行为并找到解决方法？

Answer 1

模板完成后，您需要调用列表视图的刷新方法。

$("yourUl").listview("refresh"); 如果 .page() 方法从未被调用过，你可能想做这样的事情。

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

Answer 2

这已在 alpha 2 中得到修复。请参见此处：http: //jquerymobile.com/demos/1.0a2/#docs/lists/docs-lists.html（向下滚动到“更新列表”）

Answer 3

它应该看起来像

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

最后你需要 .page() 。