javascript - 使用 jQuery 移动版本 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/ ) 更改为在“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');
        }
    });
});