jquery - 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" );

希望这可以帮助。