1

これは、モバイルアプリケーションで何をしようとしているのかを簡単に説明したものです。最終結果は、動的に生成された (アスリートの) リストを含むページであり、クリックされたアスリートの詳細を表示するページにリンクされます。そこは動いている部分なのですが、クリックが遅いので、リストのボタンから速いボタンを作ってみました。知っておくと便利: 私は phonegap を使用し、Eclipse の Android エミュレーターでテストします。2 つの HTML ページ (推奨されるベスト プラクティスとして 1 つのファイル内)、リストのあるページ、および詳細のあるページがあります。

<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="#mypage?index=1" のようにアンカーの href にページ リンクをハードコーディングすると、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); }
});

これはうまくいきません。すべてのボタンは、インデックス値が配列 LIST_OF_ATHLETES の最後の要素に等しい「#page_athlete_details」にリダイレクトされます。配列に 6 つの要素がある場合、すべてのボタンは URL "#page_athlete_details.index=5" にリダイレクトされます。index=0 の最初のボタン、index=1 の 2 番目のボタンなどの代わりに...

最後に、質問です。なぜこれが機能しないのか、または別の解決策があるのか​​ を誰かが知っていれば、私は素晴らしいと思います.

4

1 に答える 1

1

MBP.fastButton は非同期です - のコールバック関数はchangePage(page)、ループが終了するまで実際には実行されず、その時点で i は 5 に設定されます。

ループ内で確実にコールバックを使用するには、反復ごとに新しいスコープが必要です。私は通常、ループ自体を再帰関数に置き換えて非同期にしますが、この場合は、ループの本体にある自己実行関数の方がおそらく適しています。

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

どちらが使用されているかを明確にするために変数の名前を変更しましたが、この場合、同じ名前が異なるスコープで使用されていても問題ありません。

于 2012-11-19T03:19:15.853 に答える