Question

我正在使用Kendo UI Mobile应用程序（当时仅使用iOS），目前在应用程序中有3个视图。 “main”视图有一个ListView，另外两个视图是简单的形式。

列表视图绑定到本地存储中的数据，并具有获取数据的方法。当应用程序加载时，它似乎工作正常，我也可以执行“拉动刷新”，数据将更新。

我无法弄清楚当视图基本上重新显示时如何刷新列表。用户可以转到其他视图之一并执行某种操作来更新数据，这样当他们返回列表视图时，我希望数据能够自动刷新。

希望这有道理吗？我在下面加入了appInit方法，它最初是对数据的绑定：

function appInit() {
        $("#certificateList").kendoMobileListView({
            pullToRefresh: true,
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: function(options) {
                        var data = Redemptions.getCertificates();
                        options.success(data);
                    },
                    schema: {
                        model: {
                            id: 'id',
                            fields: {
                                id: { type: 'number' },
                                value: { type: 'number', format: '{c2}' }
                            }
                        }
                    }
                }
            }),
            //dataSource: kendo.data.DataSource.create({data: Redemptions.getCertificates() }),
            template: $("#certificateTemplate").html()
        });
    }

我尝试过的事情

使用附加到主视图上的data-after-show的方法
完成“添加”代码后调用$('#certificateList').data('kendoMobileListView').refresh();并导航回主视图。

Answer 1

原来我还需要在read()上为ListView添加DataSource。我得到的代码是：

function refreshCertificates() {
    var certificateList = $('#certificateList').data('kendoMobileListView');
    certificateList.dataSource.read();   // added line
    certificateList.refresh();
}

它将从以下内容中调用：

if (cert.Status === 1) { // valid
    app.navigate('#certificatesView', 'slide:right');
    refreshCertificates();
}

我选择不将它放在data-after-show属性中，因为有时我在视图实际上没有刷新时执行操作。

Answer 2

Kendo移动视图在beforeShow之前有一个事件。您应该能够为此添加一个事件处理程序，并在显示视图之前执行您需要的任何操作。

<div id="mainView" data-role="view" data-title="Main Page" data-before-show="mainViewLoad" data-layout="default">

function mainViewLoad() { 
    alert("Main View loaded"); 
}

请参阅jsbin http://jsbin.com/OBeZeZu/1/edit

此处的Kendo查看活动列表http://docs.kendoui.com/api/mobile/view#events

视图显示的Kendo UI移动刷新列表视图

2 个答案: