twitter 集成 jquery 移动应用程序

Question

我正在使用 jQuery Mobile 和 Phonegap 开发应用程序，我想将此应用程序集成到 twitter。 我试试这个。

<script type="https://twitter.com/status/user_timeline/'user'.json?count=30&callback=listTweets" type="text/javascript"></script>

JAVASCRIPT 是：

function listTweets(data){
console.log(data);
var output = '<ul data-role="listview">';

$.each(data, function(key, val){
   var text = data[key].text;
   var thumbnail = data[key].user.profile_image_url;
   var name = data[key].user.name;

   output += '<li>';
   output += '<img src="' +thumbnail+ '" alt="Photo Of ' +name+  '">';
   output += '<div>' +text+ '</div>';
   output += '</li>';
   });
   output += '</ul>';
   $('#tweetlist').html(output);
}

html 是：

<div data-role="page" id="tweets">
<div data-role="content" id="tweetlist">
</div>
</div>

它给了我空白屏幕，当我检查元素时它给了我：

考虑使用“dppx”单位，因为在 CSS 中“dpi”表示每 CSS 英寸的点数，而不是每物理英寸的点数，因此与屏幕的实际“dpi”不对应。在媒体查询表达式中：only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, only screen and (min-resolution: 240dpi)

任何建议

提前致谢。

Answer 1

使用此处指定的refresh 调用：http://api.jquerymobile.com/listview/#method-refresh

$("#tweetlist").listview('refresh');

应该可以。

编辑

我很抱歉。我没有仔细阅读你的代码。主要问题是您的 $.each 循环。您关闭 ultag 并在循环结束之前显示结果 before（JS 是函数你不记得了吗？）试试这个：

function listTweets(data){
    console.log(data);
    var output = '<ul data-role="listview">';
    var text, thumbnail, name;

    // Use a loop instead a $.each
    for(var i=0, _len=data.length; i < length; i++) {
       text = data[i].text;
       thumbnail = data[i].user.profile_image_url;
       name = data[i].user.name;

       output += '<li>';
       output += '<img src="' +thumbnail+ '" alt="Photo Of ' +name+  '">';
       output += '<div>' +text+ '</div>';
       output += '</li>';
    }
    output += '</ul>';
    $('#tweetlist').html(output);
    $("#tweetlist").listview('refresh'); // In case of
}