如何使Kendo数据源的offlineStorage中的getItem方法与LocalForage一起使用

Question

我需要设置数据源以使用localForage来管理脱机数据存储。

我遇到的问题是localForage本质上是异步的，只允许我们使用回调或承诺来检索数据。

这是我的代码设置方式：

(function () {
    'use strict';

    var serviceId = 'employeeDataSource';
    angular.module('app').factory(serviceId, function () {
        var crudServiceBaseUrl = 'Data/Employees';
        var dataSource = new kendo.data.DataSource({
            type: "odata",
            offlineStorage: {              
                getItem: function () {
                    localforage.getItem('employees-key').then(function (value) {
                        console.log(value);                                               
                        return JSON.parse(value);
                    });                   
                },
                setItem: function (item) {
                    if (item.length > 0) {
                        localforage.setItem("employees-key", JSON.stringify(item));
                    }                   
                }
            },
            transport: {
                read: {
                    url: crudServiceBaseUrl + "/",
                    dataType: "json"
                },                               
                update: {
                    url: function (data) {
                        return crudServiceBaseUrl + "(guid'" + data.EmployeeId + "')";
                    }
                },
                create: {
                    url: crudServiceBaseUrl
                },
                destroy: {
                    url: function (data) {
                        return crudServiceBaseUrl + "(guid'" + data.EmployeeId + "')";
                    }
                }
            },
            batch: false,
            pageSize: 5,
            serverPaging: true,
            schema: {
                data: function (data) {
                    return data.value;
                },
                total: function (data) {
                    return data['odata.count'];
                },
                model: {
                    id: "EmployeeId",
                    fields: {
                        EmployeeId: { editable: false, nullable: true },
                        Name: { validation: { required: true } },
                        Email: { validation: { required: true } },
                        IsManager: { type: "boolean" },
                        MaxHolidaysPerYear: { editable: false, type: "number", validation: { min: 0, required: true } },
                        HolidaysLeftThisYear: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            },
            error: function (e) {
                if (e.xhr.responseText !== undefined) {
                    console.log(e.xhr.responseText);
                }
            }
        });
        dataSource.online(navigator.onLine);
        $(window).on("offline", function () {
            dataSource.online(false);
        });
        $(window).on("online", function () {
            dataSource.online(true);
        });
        return dataSource;
    });
})();

脱机时，将调用getItem，然后使用空数组也将调用setItem，因此：:

if (item.length > 0) {
        localforage.setItem("employees-key", JSON.stringify(item));
}

当诺言最终返回离线数据（具有我期望的正确值）时，网格不显示任何结果。

此行为可能是由于应许？

我用sessionStorage尝试了同样的事情，它工作得很好...即：

getItem: function () {
     return JSON.parse(sessionStorage.getItem("employees-key"));
},
setItem: function (item) {
     sessionStorage.setItem("employees-key", JSON.stringify(item));
}

我该如何解决？

Answer 1

刚从Telerik那里单挑了

在他们的GitHub存储库中记录了有关同一问题的问题。

您可以在此处跟踪进度：

https://github.com/telerik/kendo-ui-core/issues/326

Answer 2

检查您的拼写localforage应该是localStorage