javascript - jQuery Mobile version 1.0rc3 刷新listview

Question

我正在使用 jquery.mobile-1.0rc3 版本开发平板电脑应用程序。以前，我在另一个应用程序上使用了 jquery.mobile-1.0a4.1 版本，可以通过 myListview.listview( "refresh") 刷新 ListView .

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

非常感谢。

下面是一些代码:

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

lists.empty();

/* Fill the lists with jquery template */

lists.listview( "refresh" );

错误:

uncaught exception: cannot call methods on listview prior to initialization; attempted to call method 'refresh'

Answer 1

根据您的代码运行时间，它可能在 jQuery Mobile 初始化过程之前运行。默认情况下，jsFiddle 在 load 事件触发后运行代码，因此 DOM 已全部设置好，jQuery Mobile 已完成初始化。如果您将@Phill Pafford 的 jsFiddle ( http://jsfiddle.net/qSmJq/3/ ) 更改为在“无包装(正文)”而不是“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');
        }
    });
});