jquery 1.7.2 使用模板动态更新列表视图答案

【问题标题】：jquery 1.7.2 using template to dynamically update list viewjquery 1.7.2 使用模板动态更新列表视图
【发布时间】：2012-06-05 06:52:54
【问题描述】：

首先，我对 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”生成的，因此它们会垂直拉伸。有人能告诉我为什么会发生这种情况以及如何避免吗？

谢谢。

【问题讨论】：

标签： jquery jquery-plugins jquery-mobile

【解决方案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" );

希望这会有所帮助。

【讨论】：