Question

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

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

我在这里唯一缺少的是如何动态地将所有这些添加到我的网站。我的意思是我每次都需要能够检查我有多少张专辑和每张专辑中有多少张照片，然后在jQuery Mobile中创建一个包含所有专辑名称的listView。

问题：

我知道如何使用jQuery Mobile将动态元素添加到listView。但是在这种情况下，“数据”，例如专辑名称是通过facebook SDK 异步获取的，当我的页面加载应该存储此数据的变量时，这些数据是空的！

在图片here!（抱歉没有足够的代表在这里发布）我尝试在listView中添加相册名称，但结果令人失望

正如您所看到的，保存相册名称的变量是“Undefined”，因为异步调用还没有完成..（不要介意错误只是缺少缩略图）

这是我写的代码：

<!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代码放在哪里，以便它实际上等待异步调用完成。

Answer 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功能，您应该将代码放在正确的位置，此处您必须在{{的响应之后显示列表1}}。

Answer 2

尝试填充您构建相册阵列的列表。

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');
}

此外，您似乎不再需要这些数据阵列，除非您打算用它做一些额外的事情。

在异步检索这些元素时，动态地向jQuery Mobile添加元素？

2 个答案: