kendo-ui - 哪个更适合绑定(bind) KendoUI TreeView - kendo.observableHierarchy 或 kendo.data.HierarchicalDataSource？

Question

我正在优化一个使用 Kendo TreeView 来显示大量分层数据的应用程序。目前，由于元素数量很多，它的速度真的很慢。当前的实现基于 KendoUI 的 MVVM 方法，利用 kendo.observableHierarchy。我想知道我是否切换到 kendo.data.HierarchicalDataSource。我会有任何性能优势吗？一般来说，推荐的方法是什么？

我为当前的实现使用了以下类型的代码。

 var viewModel = kendo.observable({
    isVisible: true,
    onSelect: function(e) {
        var treeView = e.sender;
        var text = treeView.text(e.node);
        kendoConsole.log("event :: select (" + text + ")");
    },
    files: kendo.observableHierarchy([
        { name: "My Web Site", type: "folder", expanded: true, items: [
            { name: "images", type: "folder", expanded: true, items: [
                { name: "logo.png", type: "image" },
                { name: "my-photo.jpg", type: "image" }
            ] },
            { name: "resources", type: "folder", expanded: true, items: [
                { name: "resources", type: "folder" },
                { name: "zip", type: "folder" }
            ] },
            { name: "about.html", type: "html" },
            { name: "index.html", type: "html" }
        ] }
    ]),
    printFiles: function() {
        // helper function that prints the relevant data from the hierarchical model
        var items = this.get("files").toJSON();

        function removeFields(item) {
            delete item.index;

            if (item.items.length == 0) {
                delete item.items;
            } else {
                item.items = $.map(item.items, removeFields);
            }

            return item;
        }

        $.map(items, removeFields);

        var jsonString = JSON.stringify(items, null, 2);

        return jsonString.replace(/\n/gi, "\n    ")
                    .replace(/\n\s*("name)/gi, " $1")
                    .replace(/\n\s*("type)/gi, " $1")
                    .replace(/\n\s*("expanded)/gi, " $1")
                    .replace(/\n\s*("selected)/gi, " $1")
                    .replace(/\n\s*("items)/gi, " $1")
                    .replace(/\s*\n\s*(})/gi, " $1")
                    .replace(/(\s*)]\n\s*}/gi, "] }");
    }
});
kendo.bind($("#example"), viewModel);

Answer 1

一个 ObservableHierarchy正在使用 HierarchicalDataSource对于它的实现，所以从一个切换到另一个可能不会有太大变化。
关于性能问题，存在三个问题:要渲染的 DOM 元素的数量、对服务器的请求数量以及传输数据的大小。

如果问题是渲染元素花费的时间太长，可以通过设置 loadOnDemand 来解决。 true 的选项，这将导致在展开元素时呈现元素(如果您使用的是本地数据，则默认为 false)。

如果您正在使用远程绑定(bind)并且担心加载后的响应速度，则可以通过在一个请求中获取所有数据而不是为每个级别发出单独的请求来改进此问题(但如果您已经在使用本地数据，这不适用)。另一方面，如果您关心最初设置它需要多长时间，您应该使用 loadOnDemand: true所以小部件只向服务器请求它需要显示的数据。