jquery-mobile - jQuery Mobile 初始化 ListView 的正确方法

Question

这是我的问题。我的索引中有一些硬编码的伪页面。一些填充内容，一些空的将仅通过ajax在用户交互时填充。此 ajax 内容包含 html 列表。当它们加载时，它们没有漂亮的 jquery 移动外观，所以我必须调用 .listview() 方法，以便 jqm 框架在我的 ajax 回调中解析它。那就是我经常得到这个 JS 错误的地方:

未捕获的类型错误:无法读取未定义的属性“jQuery162027575719612650573”

号码永远不一样...

我想知道在页面加载 ajax 内容后是否使用正确的方法来解析 ListView 。当加载有轻微延迟并且完成事件触发太快并且我的 ListView 当时还没有在DOM中时，似乎触发了错误，只是一个猜测。 ajax 调用后初始化 ListView 的推荐方法是什么？

这是非常不幸的，因为当发生 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>

在它下面有一个脚本标签，在 pageshow 上绑定(bind)一个 ajax 调用来激活 ListView

<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> 

Answer 1

您使用的是什么版本的 jQuery Mobile？在最新的 beta (1.0b2) 中，您可以触发 create dom 元素上的事件让框架对其进行初始化:

New “create” event: Easily enhance all widgets at once

While the page plugin no longer calls each plugin specifically, it does dispatch a “pagecreate” event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page, just like before. For example, if the selectmenu plugin is loaded, it will enhance any selects it finds within a newly created page.

This structure now allows us to add a new create event that can be triggered on any element, saving you the task of manually initializing each plugin contained in that element. Until now, if a developer loaded in content via Ajax or dynamically generated markup, they needed to manually initialize all contained plugins (listview button, select, etc.) to enhance the widgets in the markup.

Now, our handy create event will initialize all the necessary plugins within that markup, just like how the page creation enhancement process works. If you were to use Ajax to load in a block of HTML markup (say a login form), you can trigger create to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

Create vs. refresh: An important distinction

Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method that some widgets have should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.

For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.

链接: 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>