jquery 1.7.2使用模板動態更新列表視圖

Question

首先我對jquery和jquerymobile非常陌生，所以很抱歉如果問題很蠢。 我正嘗試將舊項目（使用JQ 1.6.4 JQM 1.0b1編寫）移植到JQ 1.7.2 + JQM 1.1.0。有一部分使用模板插件通過解析JSON動態更新列表視圖。

HTML代碼：

... 
<ul data-role="listview" id="MyItems" data-inset="true"></ul> 
... 

模板：

<script id="MyListItem" type="text/x-jquery-tmpl"> 
<li> 
    <div class="ui-li-almost-right"><button id="editButton">Edit</button></div> 
    <a href="javascript:true" id="connectLink">${symname}&nbsp;</a> 
</li> 
</script> 

更新列表：

$(items).each(function (i, item) { 
    var myTemplate=$("#MyListItem").tmpl(item); 
    myTemplate.appendTo($("#MyItems")); 
}); 
$("#MyItems").listview("refresh"); 

有了一個新的版本，如果JQ和JQM列表項與類生成「 ui-page「，因此它們被垂直拉伸。有人可以告訴我爲什麼會發生這種情況，以及如何避免它？

謝謝。

Answer 1

您可以使用下一代的jQuery模板：JSRender，具有：

模板：

<script id="MyListItem" type="text/x-jquery-tmpl"> 
<li> 
    <div class="ui-li-almost-right"><button id="editButton">Edit</button></div> 
    <a href="javascript:true" id="connectLink">{{:symname}}&nbsp;</a> 
</li> 
</script> 

要更新data.items名單：

var dataList = $("#MyList"); 
// Create items using template & add to list 
dataList.append($("#MyListItem").render(data.items)); 
// Call listview jQuery UI Widget for correct rendering 
dataList.listview("refresh"); 

希望這有助於。