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

希望这有帮助。

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

1 个答案: