jQM listview («обновить»);ломает вставные списки - PullRequest
Новая
       1

jQM listview («обновить»);ломает вставные списки

1 голос
/ 19 января 2012

Кажется, я не могу понять, почему это происходит: у меня есть неупорядоченный список в jQuery Mobile с data-inset="true", и при первом рендеринге он отлично выглядит с закругленными верхом и низом. Однако после динамического добавления новых элементов в список и вызова listview('refresh') для него он отображается как не вставленный в список.

Обновление: Это происходит только при вызове listview('refresh'); в списке, которого нет на текущей активной странице. Когда вы переходите на страницу со списком, список обновляется всеми стилями, относящимися к списку вставок, КРОМЕ скругленных углов вверху и внизу. Для воспроизведения этой ошибки используйте это: http://jsfiddle.net/94X7S/10/

Вот как выглядит 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 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'); <</p> 

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'); - есть ли причина, по которой это происходит, или что-то, что можно сделать, чтобы предотвратить это? Любая помощь будет оценена.

1 Ответ

1 голос
/ 20 января 2012

Я понимаю, что вы имеете в виду при переходе на вторую страницу. Обходным решением будет использование только 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/

...