Kendo UI Mobile 刷新列表 View on View Show

Question

我正在开发一款 Kendo UI Mobile 应用程序（当时仅使用 iOS），目前在该应用程序中有 3 个视图。 “主”视图有一个 ListView，其他 2 个视图是简单的表单。

列表视图绑定到我在本地存储中的数据，并且有一种获取数据的方法。当应用程序加载时，一切似乎都运行良好，我还可以执行“拉动刷新”并且数据会更新。

我想不通的是当视图基本上重新显示时如何刷新列表。用户可以转到其他视图之一并执行某种操作来更新数据，因此当他们返回列表视图时，我希望数据能够自动刷新。

希望这有意义吗？我在下面包含了我的 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

原来我还需要在 ListView 的DataSource 上添加一个read()。我的结果代码是：

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"); 
}

见jsbinhttp://jsbin.com/OBeZeZu/1/edit

剑道在这里查看活动列表http://docs.kendoui.com/api/mobile/view#events