1

アイデアは、フォト アルバムとパブリック facebook ページから写真をインポートし、ユーザーに表示する単純な jquery モバイル サイトを開発することです。

私は Facebook の Javascript SDK を使用しており、フォト アルバム名、写真へのリンクなど、ページから必要なすべての情報を正常に取得できます。

ここで欠けているのは、これらすべてを Web サイトに動的に追加する方法だけです。つまり、所有しているアルバムの数と各アルバムの写真の数を確認し、すべてのアルバム名を使用して jQuery Mobile で listView を作成できるようにする必要があるということです。

問題：

jQuery Mobile を使用して listView に要素を動的に追加する方法を知っています。ただし、この場合、アルバム名などの「データ」は facebook SDK を介して非同期にフェッチされ、ページが読み込まれるまでに、このデータを格納すると思われる変数が空になります。

ここの写真で！(申し訳ありませんが、ここに投稿するには十分な担当者がいません) listView にアルバム名を追加しようとしましたが、結果が期待外れです

非同期呼び出しがまだ完了していないため、アルバム名を保持する変数が「未定義」になっていることがわかります.. (エラーはサムネイル写真がないことを気にしないでください)

これは私が書いたコードです:

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title>CityInfo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head> 

<body> 

    <div id="fb-root"></div>
    <script>

        var albumName = new Array();
        var albumId = new Array();
        var albumCover = new Array();   

        window.fbAsyncInit = function() {
            // init the FB JS SDK
            FB.init({
                appId      : '564984346887426',                    // App ID from the app dashboard
                channelUrl : 'channel.html',                       // Channel file for x-domain comms
                status     : true,                                 // Check Facebook Login status
                xfbml      : true                                  // Look for social plugins on the page
            });

            // Additional initialization code such as adding Event Listeners goes here
            FB.api('593959083958735/albums', function(response) {
                if(!response || response.error) {
                    // render error
                    alert("Noo!!");
                } else {
                    // render photos
                    for(i=0; i<response.data.length; i++){
                        albumName[i] = response.data[i].name;
                        albumCover[i] = response.data[i].cover_photo;
                        albumId[i] = response.data[i].id;                       
                    }
                }
            });

        };

        // Load the SDK asynchronously
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        $(document).ready(function(){
            $("ul").append('<li><a href="testFile.HTML" data-transition="slidedown"> <img src="photo.png"/> <h2>' + albumName[0] + '</h2> <p> Test Paragraph</p></a></li>').listview('refresh');
        });

    </script>



    <div data-role="page" id="home" data-theme="c">
        <div data-role="content">
            <h2 id="banner" align = "center">Photo Albums</h2>
            <ul data-role="listview" data-inset="true"> 

            </ul>

        </div>
    </div>

</body>
</html>

ご覧のとおり、javascript SDK を実装すると、 albumNames 、 Ids などを取得します (これらの変数にアラートを出すと、期待されるすべてのデータが含まれています! アラートは実際に非同期呼び出しが完了するのを待ちますか?)。次に、jQuery を使用して listView に要素を追加しますが、変数は空です (ご覧のとおり未定義)。

だから私は本当にここで何が欠けていますか? 非同期呼び出しが完了するのを実際に待機するように、jQuery コードをどこに置くべきですか。

4

2 に答える 2

1

置くだけ

$("ul").append('<li><a href="testFile.HTML" data-transition="slidedown"> <img src="photo.png"/> <h2>' + albumName[0] + '</h2> <p> Test Paragraph</p></a></li>').listview('refresh');

の：

FB.api('593959083958735/albums', function(response) {
  if(!response || response.error) {
     // render error
     alert("Noo!!");
  } else {
    // render photos
    for(i=0; i<response.data.length; i++){
       albumName[i] = response.data[i].name;
       albumCover[i] = response.data[i].cover_photo;
       albumId[i] = response.data[i].id;

       $("ul").append('<li>'+
                        '<a href="testFile.HTML" data-transition="slidedown">'+
                          '<img src="photo.png"/>'+
                          '<h2>' + albumName[0] + '</h2>'+
                          '<p> Test Paragraph</p>'+
                        '</a>'+
                     '</li>')
             .listview('refresh');
    }
  }
 });

アラートは実際に非同期を待機しますか

には、asynまたはsync機能がありませんjQuery。コードを適切な場所に配置する必要があります。ここでは、の応答の直後にリストを表示する必要がありますfacebook API。

于 2013-06-19T12:02:18.570 に答える
0

アルバム配列を構築しているリストを作成してみてください。

var myList = $("ul"); // better save this in a var
for (i=0; i<response.data.length; i++) {
  myList.append('<li><img src="' + response.data[i].cover_photo + '" /><h2>' + response.data[i].name + '</h2></li>').listview('refresh');
}

また、追加のことを計画していない限り、これらのデータ配列はもう必要ないようです。

于 2013-06-19T11:50:48.910 に答える