JQuery Mobile правильный способ инициализации просмотра списка - PullRequest
4 голосов
/ 02 сентября 2011

Вот моя проблема. У меня есть несколько жестко закодированных псевдостраниц в моем указателе. Некоторые заполнены контентом, некоторые пустыми, которые будут заполнены при взаимодействии с пользователем только ajax. Этот контент ajax содержит HTML-списки. Когда они загружаются, у них нет приятного мобильного вида jquery, поэтому мне нужно вызвать метод .listview (), чтобы инфраструктура jqm проанализировала его в моем обратном вызове ajax. Вот где я часто получаю эту ошибку JS:

Uncaught TypeError: Невозможно прочитать свойство 'jQuery162027575719612650573' из неопределенного

Число никогда не бывает одинаковым ...

Интересно, использую ли я правильный способ для анализа списка после того, как страница загрузит содержимое ajax. ошибка, кажется, вызвана, когда есть небольшая задержка для загрузки, и событие завершения запущено слишком рано, и мой просмотр списка еще не находится в DOM в тот момент, только предположение. Каков рекомендуемый способ инициализации списка после вызова ajax?

Это очень прискорбно, потому что, когда возникает ошибка js, кажется, что она останавливает дальнейшее выполнение js ...

так вот моя пустая псевдостраница:

<div data-role="page" id="playlist" data-add-back-btn="true">
    <div data-role="header">
        <h1><g:message code="pd.playlist" /></h1>
    </div>
    <div data-role="content"></div>
</div>

прямо под ним есть тег script с вызовом ajax bind ajax на страницах шоу для активации просмотра списка

<script type="text/javascript">
$('#playlist').bind('pageshow', function () {
    $.ajax({
        url: "updatePlaylistTemplate.gsp",
        error:function(x,e){handleAjaxError(x,e);},
        beforeSend:function(){$.mobile.showPageLoadingMsg();},
        complete:function(){
            $.mobile.hidePageLoadingMsg();
            $('[data-role="listview"]').listview(); //re-active all listview
        },
        success:function(data, textStatus, jqXHR){
            $('#playlist').find('[data-role="content"]').html(data);
        }
    });
});
</script>

updatePlaylistTemplate возвращает это (извлечение):

<ul data-role="listview" data-split-theme="d"> 
    <li data-icon="delete"> 
        <a href="javascript:void(0);" onclick="loadGet('urlToRemoveProdiver',$('#playlist'),doOnCallBack);">Provider: Bell</a> 
    </li> 
    <li data-icon="delete"> 
        <a href="javascript:void(0);" onclick="loadGet('urlToRemoveChannel',$('#playlist'),doOnCallBack);">Rock - Classic Rock</a> 
    </li> 
    <li data-icon="refresh" data-theme="e"><a href="javascript:void(0);" onclick="loadGet('urlToReloadPlaylist',$('#playlist'),doOnCallBack)">Refresh list</a></li> 
    <li data-role="list-divider">Next song</li> 
    <li> 
        <a href="urlToViewSongInfo"> 
            <img src="images/song.gif" /> 
            <h3>Albert Flasher</h3> 
            <p>The Guess Who</p> 
            <p class="ui-li-aside">Next</p> 
        </a> 
    </li> 
    <li data-role="list-divider">Now playing</li> 
    <li> 
        <a href="urlToviewSongInfo"> 
            <img src="images/song.gif" /> 
            <h3>Crime of the Century</h3> 
            <p>Supertramp</p> 
            <p class="ui-li-aside">14h49</p> 
        </a> 
    </li> 
    <li data-role="list-divider">Previous songs</li> 
    <li> 
        <a href="urlToViewSongInfo"> 
            <img src="images/song.gif"" /> 
            <h3>Desperado</h3> 
            <p>Alice Cooper</p> 
            <p class="ui-li-aside">14h45</p> 
        </a> 
    </li>
[...]
</ul> 

1 Ответ

5 голосов
/ 03 сентября 2011

Какую версию jQuery Mobile вы используете?В последней бета-версии (1.0b2) вы можете инициировать событие create в элементе dom, чтобы инфраструктура его инициализировала:

Новое событие «создать»: простое улучшение всех виджетов одновременно

Хотя плагин страницы больше не вызывает каждый плагин отдельно, он отправляет событие «pagecreate», которое большинство виджетов используют для автоматической инициализации.Пока на скрипт плагина виджета ссылаются, он будет автоматически улучшать любые экземпляры виджетов, которые он найдет на странице, как и раньше.Например, если плагин selectmenu загружен, он улучшит любые выборки, найденные на вновь созданной странице.

Эта структура теперь позволяет нам добавлять новое событие создания, которое может запускаться на любом элементе, сохраняя васзадача ручной инициализации каждого плагина, содержащегося в этом элементе.До сих пор, если разработчик загружал контент через Ajax или динамически генерируемую разметку, ему нужно было вручную инициализировать все содержащиеся в нем плагины (кнопка просмотра списка, выбор и т. Д.), Чтобы улучшить виджеты в разметке.

Теперь нашСобытие handy create инициализирует все необходимые плагины внутри этой разметки, так же, как работает процесс улучшения создания страницы.Если вам нужно было использовать Ajax для загрузки в блок HTML-разметки (скажем, форму входа в систему), вы можете запустить create, чтобы автоматически преобразовать все содержащиеся в нем виджеты (в данном случае входы и кнопки) в расширенные версии.Код для этого сценария будет выглядеть следующим образом:

$ (... новая разметка, содержащая виджеты ...) .appendTo (".ui-page") .trigger ("create");

Создание и обновление: важное различие

Обратите внимание, что между событием создания и обновлением есть важное различие, которое есть в некоторых виджетах.Событие create подходит для улучшения необработанной разметки, содержащей один или несколько виджетов.Метод обновления, который есть у некоторых виджетов, следует использовать в существующих (уже улучшенных) виджетах, которыми манипулировали программно, и для их соответствия необходимо обновить интерфейс пользователя.

Например, если у вас была страница, к которой вы динамически добавлялиновый неупорядоченный список с атрибутом data-role = listview после создания страницы, инициирующий создание родительского элемента этого списка, превратит его в виджет в виде списка.Если после этого программным способом добавилось больше элементов списка, то при вызове метода обновления представления списка только эти новые элементы списка будут обновлены до расширенного состояния, и существующие элементы списка не будут затронуты.

Ссылка: http://jquerymobile.com/blog/

Вы также можете скопировать вывод, созданный jQuery Mobile, и использовать эту структуру вместо использования тегов <li> и в зависимости от jQM для ее инициализации:

<li data-role="list-divider" class="ui-li ui-li-divider ui-btn ui-bar-a ui-btn-up-undefined" role="heading"><span>List Divider</span></li>
<li data-theme="b" class="ui-li ui-li-static ui-body-b">Regular LI</li>
...