在 JQuery Mobile 和 Phonegap 中使用快速按钮更改页面的动态列表

Question

这是我在移动应用程序中尝试做的简单描述。最终结果应该是一个页面，其中包含动态生成的（运动员）列表，并链接到显示点击运动员详细信息的页面。那是工作的部分，但是点击很慢，所以我尝试从列表中的按钮中制作快速按钮。 很高兴知道：我使用 phonegap 并在 Eclipse 中的 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 i 用户无需快速按钮即可动态创建列表。此列表需要在 pagecreate 上创建一次。 注意：要更改页面，在锚的 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, ' '));
    }
}

现在我尝试了许多不同的方法来在其中包含 google 快速按钮，但似乎没有任何效果。 您可以在这里找到快速按钮的代码：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_' +i。 可能是因为它还没有在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) 的回调函数直到循环结束后才会真正运行，此时 i 设置为 5。

要在循环中可靠地使用回调，每次迭代都需要一个新范围。我通常通过用递归函数替换它来使循环本身异步，但在这种情况下，循环体中的自执行函数可能更适合。

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

我重命名了变量以明确使用的是哪个变量，但在这种情况下，是否在不同的范围内使用相同的名称并不重要。