jQuery-mobile 不能很好地与 jQuery-tmpl 配合使用？答案

【问题标题】：jQuery-mobile does not play well with jQuery-tmpl?jQuery-mobile 不能很好地与 jQuery-tmpl 配合使用？
【发布时间】：2011-05-14 03:05:51
【问题描述】：

有什么理由为什么模板和 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。有没有人看到这种行为并找到了解决方法？

【问题讨论】：

标签： jqtouch jquery-mobile jquery-templates

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

应该是这样的

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

最后你需要 .page()。

【讨论】：

不幸的是，这无济于事。 .page() 调用在需要重新渲染页面元素时起作用；在这种情况下，它是一个列表视图。但是 .listview("refresh") （正如 alpha 2 文档推荐的那样）可以解决问题。

【解决方案3】：

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

【讨论】：