使用 jQuery mobile 版本 1.0rc3 刷新 listview

Question

我正在开发一个带有 jquery.mobile-1.0rc3 版本的平板电脑应用程序。以前，我在另一个应用程序上使用了 jquery.mobile-1.0a4.1 版本，并且可以通过执行 myListview.listview( "refresh" ) 来刷新列表视图.

我在使用新的 jquery.mobile-1.0rc3 版本时遇到了一些问题。新的 jquery.mobile-1.0rc3 版本可以做到这一点吗？

非常感谢。

下面是一些代码：

var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );

lists.empty();

/* Fill the lists with jquery template */

lists.listview( "refresh" );

错误：

未捕获的异常：无法调用 listview 之前的方法 初始化;试图调用方法“刷新”

Answer 1

根据您的代码运行时间，它可能在 jQuery Mobile 初始化过程之前运行。默认情况下，jsFiddle 在load 事件触发后运行代码，因此 DOM 已全部设置完毕，jQuery Mobile 已完成初始化。如果您将@Phill Pafford 的 jsFiddle (http://jsfiddle.net/qSmJq/3/) 更改为在“no wrap (body)”而不是“onLoad”上运行，那么您会得到与报告相同的错误。所以我建议要么删除 lists.listview('refresh'); 行，要么将代码放入 document.ready 或 pageshow/pagecreate 事件处理程序中：

var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );

lists.empty();

/* Fill the lists with jquery template */

//lists.listview( "refresh" );

这是一个用于在浏览器解析代码后立即运行代码的 jsfiddle：http://jsfiddle.net/jasper/qSmJq/5/

或者：

$(function () {
    var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );

    lists.empty();

    /* Fill the lists with jquery template */

    lists.listview( "refresh" );
}

这是一个 jsfiddle，用于将您的代码包装在 document.ready 事件处理程序中：http://jsfiddle.net/jasper/qSmJq/4/

或者：

$('#my-page-id').on('pagecreate', function () {
    var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );

    lists.empty();

    /* Fill the lists with jquery template */

    //lists.listview( "refresh" );
}

这是使用pageshow 事件的jsfiddle：http://jsfiddle.net/jasper/qSmJq/6/

这里是使用pagecreate 事件的jsfiddle：http://jsfiddle.net/jasper/qSmJq/7/

附带说明：如果您想检测 jQuery Mobile 是否已初始化某个元素，您可以检查该元素上的 jQuery Mobile 特定类：

$(function () {

    //cache lists
    var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );

    //iterate through the lists
    lists.each(function (index, value) {

        //cache this specific list
        var $value = $(value);

        /*add rows to this listview here*/

        //check if the listview has been initialized by jQuery Mobile by checking for the existence of the `ui-listview` class
        if ($value.hasClass('ui-listview')) {

            //since the class was found, refresh the already initialized element
            $value.listview('refresh');
        } else {

            //the class was not found, so initialize the widget
            $value.trigger('create');
        }
    });
});