動態列表與快速按鈕來改變頁面在JQuery Mobile和Phonegap

Question

這裏是我想要在移動應用程序中做什麼的簡單描述。最終的結果應該是一個包含動態生成列表（運動員）的頁面，並鏈接到顯示點擊運動員細節的頁面。這是工作的一部分，但點擊速度很慢，所以我試圖讓快速按鈕脫離列表中的按鈕。 相關知識：我在Eclipse中使用phonegap並在Android模擬器上測試。 我有2個HTML頁面（在一個文件中，所建議的最佳實踐），與列表的頁面，並與細節的頁面

<div data-role="page" id="page_athletes_list" data-theme="a"> 
    <div data-role="header" data-position="fixed"> 
    <h1>My app</h1> 
    </div> 

    <div id = "content_athletes_list" data-role="content"> 
    <h2>Athletes Finder</h2> 
     <ul id="ul_athletes_list" data-role="listview" data-divider-theme="b" data-inset="true"> 
     <li data-role="list-divider" data-role="heading">Name, Firstname</li> 
     </ul> 
    </div> 

</div> 

詳細信息頁面：

<div data-role="page" id="page_athlete_details" data-theme="a"> 
    <div data-role="header" data-position="fixed"> 
     <h1>My app</h1> 
    </div> 
    <div id = "content_athletes_details" data-role="content"> 
     <h2 id = "name_athlete_details"></h2> 
     <img id = "img_athlete_details" src=""></img> 
     <div id = "birthday_athlete_details"></div> 
    </div> 
</div> 

的JavaScript我用戶無需快速按鈕即可動態創建列表。該列表需要在頁面創建時創建一次。 注意：要更改頁面，在錨點的href（例如href =「＃mypage？index = 1」）中對頁面鏈接進行硬編碼會導致phonegap出現問題。一旦細節首次創建，它就不會顯示任何其他數據。爲了繞過這一點，我把頁面鏈接放在一個data-url屬性中，我檢索並使用JQuery「$ .mobile.changePage」函數。

/* 
function create a list to the detail page with an index parameter. 
The index correspond to the the index of an array LIST_OF_ATHLETES where you can find the details information for all the athletes. 
This array is used to fill the data in the details page. 
*/ 
$('#page_athletes_list').live('pagecreate',function(){ 
    try { 
     for (var i = 0; i < LIST_OF_ATHLETES.length; i ++){ 
       var athlete = LIST_OF_ATHLETES[i]; //LIST_OF_ATHLETES is an array that contains all the infos about the athletes. 
      $("#ul_athletes_list").append("<li data-theme='a'><a id='ul_athletes_list_item_" + i + "' data-url='#page_athlete_details?index=" + i + "' > " + athlete.lastname +", " + athlete.firstname + "</a></li>");  
     } 
    } 
    catch (error) { alert("page_athletes_list : " + error); } 
}); 

    //change page on "touchend" event. Use the data-url attribute of the anchor. 
    $("#content_athletes_list li a").live("touchend", function(){ 
    var dataUrl = $(this).attr("data-url"); 
    changePage(dataUrl); 
}); 

function changePage(dataUrl) { 
    var page = getParameterByName('#', dataUrl); 

    $.mobile.changePage(page, {dataUrl: dataUrl}); 
} 

//get a parameter by name from a url (source). 
function getParameterByName(name, source) { 
    if(name == "#"){ 
     var indexStart=source.indexOf('#'); 
     var indexEnd = source.length-indexStart; 
     var indexParam = source.indexOf("?"); 
     if(indexParam > indexStart){ 
      indexEnd = indexParam-indexStart; 
     } 
     return source.substring(indexStart, indexEnd); 
    } 
    else{ 
     var match = RegExp('[?&]' + name + '=([^&]*)').exec(source); 
     return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); 
    } 
} 

現在我嘗試了很多不同的東西，包括谷歌快速按鈕在那裏，但似乎沒有工作。 你可以在這裏找到快速按鈕的代碼：https://github.com/h5bp/mobile-boilerplate/blob/master/js/helper.js

我嘗試的第一件事是創建錨後添加一個新的快速按鈕。 例如：

$("#ul_athletes_list").append("<li data-theme='a'><a id='ul_athletes_list_item_" + i + "' > " + athlete.lastname +", " + athlete.firstname + "</a></li>"); 
new MBP.fastButton(document.getElementById('ul_athletes_list_item_' + i), function(){changePage("#page_athlete_details?index=" + i)}); 

當我做這個的document.getElementById沒有找到錨 'ul_athletes_list_item_' +我。 可能因爲它不在dom中。 我改變了策略，並試圖通過javascript列出元素，然後創建按鈕新創建的元素。

$('#page_athletes_list').live('pagecreate',function(){ 
    try { 
     for (var i = 0; i < LIST_OF_ATHLETES.length; i ++){ 
      var athlete = LIST_OF_ATHLETES[i]; 
      var page = "#page_athlete_details?index=" + i ; 
      var list = document.getElementById("ul_athletes_list"); 
      var li = document.createElement("li"); 
      var anchor = document.createElement("a"); 
      anchor.innerHTML = athlete.lastname +", " + athlete.firstname; 
      new MBP.fastButton(anchor, function(){changePage(page)}); //the fastbutton on the current element of the list 
      li.appendChild(anchor); 
      list.appendChild(li);  
     } 
    } 
    catch (error) { alert("page_athletes_list : " + error); } 
}); 

這是行不通的。所有按鈕都會重定向到「#page_athlete_details」，索引值等於數組LIST_OF_ATHLETES的最後一個元素。如果我的數組中有6個元素，則所有按鈕都將重定向到url「＃page_athlete_details.index = 5」。而不是索引= 0的第一個按鈕，索引= 1的第二個按鈕，等等......

因此，最後，如果有人知道這個問題爲什麼這不起作用或有替代解決方案，我會很好。

Answer 1

MBP.fastButton是異步的 - 與changePage(page)回調函數並不實際運行循環結束後，直到此時我設置爲5

在循環中可靠地使用回調，你每次迭代都需要一個新的範圍。我通常通過將循環替換爲遞歸函數來使循環本身是異步的，但在這種情況下，循環體中的自執行函數可能更適合。

(function(page_local) { 
    new MBP.fastButton(anchor, function(){changePage(page_local)}); 
})(page_global); 

我改名爲變量，以澄清正在使用哪一個，但在這種情況下，如果同一個名稱在不同範圍內使用過它不應該的問題。