javascript - jquery-mobile ListView -> 刷新事件

Question

我看过一些与此类似的帖子，所以如果这是重复的，我提前表示歉意。

我在提取一些数据时有这个代码，但我似乎无法弄清楚为什么我的列表没有被刷新......有任何可能的解决方案吗？这是我的 JS。

/* VARIABLES
-------------------------------------------------------------------- */
var serviceUrl = "http://localhost/app/services/";
var serviceToLoad = "homeList.php";

var home;
var pageId    = "#homePage";
var contentId = "#homeList";


/* JQUERY
-------------------------------------------------------------------- */
$(pageId).live('pageshow', function(event){
    getHomeList();
});


/* FUNCTION SET
-------------------------------------------------------------------- */
function getHomeList() {

    $.getJSON(serviceUrl + serviceToLoad, function(data) {

        // Remove all content first
        $(contentId +' li').remove();

        // Load Data
        $.each(data.items, function(index, list){
            $(contentId).append('<li><a href="#">' + list.name + '</a></li>\n');
        });

    });

    // Reload View
    $(contentId).listview('refresh');
}

这是我的 HTML 页面

<div id="homePage" data-role="page" >
    <div data-role="header" data-position="fixed"><h1>Home</h1></div>

    <div data-role="content">
         <ul id="homeList" data-role="listview"></ul>
    </div>
</div>

任何帮助将不胜感激!

Answer 1

Ajax 调用是异步，因此，请将刷新 ListView 放在 jSON 调用中!

/* VARIABLES
-------------------------------------------------------------------- */
var serviceUrl = "http://localhost/app/services/";
var serviceToLoad = "homeList.php";

var home;
var pageId    = "#homePage";
var contentId = "#homeList";


/* JQUERY
-------------------------------------------------------------------- */
$(pageId).live('pageshow', function(event){
    getHomeList();
});


/* FUNCTION SET
-------------------------------------------------------------------- */
function getHomeList() {

$.getJSON(serviceUrl + serviceToLoad, function(data) {

    // Remove all content first
    $(contentId +' li').remove();

    // Load Data
    $.each(data.items, function(index, list){
        $(contentId).append('<li><a href="#">' + list.name + '</a></li>\n');
    });

    // Reload View
   $(contentId).listview('refresh')
});
}