jQuery Mobile正確初始化列表視圖的方法

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

Answer 1

您使用的是什麼版本的jQuery Mobile？在最新的測試版（1.0b2）你可以觸發一個DOM元素create事件讓框架初始化：

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到inititialize它：

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