jquery - jQM ListView ('refresh' );正在打破插图列表

Question

我似乎无法找出发生这种情况的原因:我在 jQuery Mobile 中有一个无序列表 data-inset="true"当它第一次呈现时，它的顶部和底部看起来非常完美。但是，在向列表动态添加新元素并调用 listview('refresh') 之后在其上，它呈现为非插入列表。

更新:这只会在调用 listview('refresh'); 时发生在不在当前事件页面上的列表上。当您转到带有列表的页面时， ListView 会更新为与插入列表相关的所有样式，除了顶部和底部的圆 Angular 。要重现此错误，请使用:http://jsfiddle.net/94X7S/10/

这是调用 .listview('refresh'); 之前列表中 HTML 的样子

<ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">
        User Reviews (4) <span class="rate"><img src="..." alt="Rating"/></span>
    </li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li">
        <div class="ui-btn-inner ui-li" aria-hidden="true">
            <div class="ui-btn-text">
                <a href="#reviews" class="ui-link-inherit">
                    <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3>
                    <p class="ui-li-desc">Review Content...</p>
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/>
        </div>
    </li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom">
        <div class="ui-btn-inner ui-li" aria-hidden="true">
            <div class="ui-btn-text">
                <a href="#reviews" class="ui-link-inherit">
                    <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3>
                    <p class="ui-li-desc">Review Content...</p>
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/>
        </div>
    </li>
</ul>

下面是列表中的 HTML 在调用 .listview('refresh'); 之后的样子 <

ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b">
        User Reviews (4) <span class="rate"><img src="..." alt="Rating"/></span>
    </li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li">
        <div class="ui-btn-inner ui-li" aria-hidden="true">
            <div class="ui-btn-text">
                <a href="#reviews" class="ui-link-inherit">
                    <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3>
                    <p class="ui-li-desc">Review Content...</p>
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/>
        </div>
    </li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li">
        <div class="ui-btn-inner ui-li" aria-hidden="true">
            <div class="ui-btn-text">
                <a href="#reviews" class="ui-link-inherit">
                    <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3>
                    <p class="ui-li-desc">Review Content...</p>
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/>
        </div>
    </li>
</ul>

请注意第一个和最后一个 <li> 上的一些类在 listview('refresh'); 之后丢失- 是否有发生这种情况的原因或可以采取哪些措施来防止这种情况发生？任何帮助将不胜感激。

Answer 1

导航到第二页时我明白你的意思了。解决方法是仅在实际显示页面时 refresh listview 元素:

$('.add').click( function(){

    //you can combine selectors by adding a comma in-between them
    $('#1, #2').append('<li>' + count + '</li>');

    //refresh the listview on the current page (if it exists)
    $(this).closest('.ui-content').find('.ui-listview').listview('refresh');

    count++;
});

$('[data-role="page"]').bind('pageshow', function () {

    //refresh the listview on the current page (if it exists)
    $(this).find('.ui-listview').listview('refresh');
});

这是一个演示:http://jsfiddle.net/94X7S/12/