1

这个想法是开发一个简单的 jquery 移动网站，从公共 facebook 页面导入相册和照片并将它们显示给用户。

我正在使用 Facebook 的 Javascript SDK，我可以成功地从页面中检索我需要的所有信息，如相册名称、照片链接等。

我在这里唯一缺少的是如何将所有这些动态添加到我的网站。我的意思是我每次都需要能够检查我有多少张专辑以及每个专辑中有多少张照片，然后在 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 回答