Kendo UI PanelBar绑定DataSource出现JS栈溢出错误如何解决

问题根因 #

Kendo UI PanelBar 是树形层级组件，不支持绑定普通 kendo.data.DataSource，默认会递归遍历查找子节点配置，使用普通数据源会触发无限递归导致JS栈溢出。

解决方案 #

将数据源替换为层级专用的 kendo.data.HierarchicalDataSource，并明确配置层级规则，修复后代码如下：

<ul id="vacancies"/>

<script>
    var dataSource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "/MemberBack/GetVacancies",
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "VacancyId",
                // 明确声明无下级子节点，终止递归遍历
                hasChildren: false,
                // 无层级时直接指定子节点为空数组
                children: []
            }
        }
    });

    $('#vacancies').kendoPanelBar({
        dataSource: dataSource,
        // 明确指定面板展示文本对应的接口返回字段，替换为你的实际字段名即可
        dataTextField: "你要展示的字段名（比如VacancyTitle）"
    });
</script>

额外排查项 #

如果修改后仍有报错，可按以下顺序排查：

• 若接口返回多级嵌套数据，需将 schema.model.children 配置为后端返回的子节点数组对应的字段名，例如子节点存在subList字段中则写为 children: "subList"
• 检查接口返回的JSON是否存在循环引用（如子项的parent字段指向父节点对象），如有需后端移除循环引用字段
• 低版本Kendo UI可额外添加配置 animation: false 关闭展开动画，避免冗余递归逻辑

内容的提问来源于stack exchange，提问作者Ben Emanuel