Kendo ui 哪一个更适合绑定KendoUI TreeView-kendo.observehierarchy或kendo.data.HierarchicalDataSource？

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

我在当前实现中使用了以下类型的代码

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

---

observehierarchy

使用

hierarchycaldatasource

实现，因此从一个切换到另一个可能不会有太大变化。 关于性能问题，有三个问题：要呈现的DOM元素数量、对服务器的请求数量以及传输的数据的大小

如果问题是渲染元素花费的时间太长，可以通过将选项设置为

true

，这将导致在展开元素时渲染它们（如果使用本地数据，则默认为false）

如果您正在使用远程绑定，并且担心它在加载后的响应性如何，那么可以通过在一个请求中获取所有数据，而不是为每个级别发出单独的请求来改进此问题（但如果您已经在使用本地数据，则不适用）。另一方面，如果您关心初始设置需要多长时间，则应使用

loadOnDemand:true

，以便小部件仅从服务器请求需要显示的数据