如何根据 json 提要中的属性从 JQuery 面板项目导航

Question

Kendo 的新手，认为这很容易，但我正在努力寻找答案。我有一个基于 json 对象的 JQuery 面板栏。我希望屏幕导航到 json 中定义的 url。每个项目在 json 中都有自己独特的 url。

我考虑过添加一个带有隐藏跨度的模板并添加一个自定义 class 和一个 data-itemid 属性，但不确定我是否考虑过度了。我不知道 Kendo 是否有一种我缺少的简单方法。

此外，是否有用于导航的 Kendo 方法，或者我应该只在函数中使用 window.location。

最后，我注意到在定义面板栏时可以使用 select 方法，但是，很多人似乎只是在脚本中使用函数 onSelect(e)... 编写函数标签。单击面板项时将用户发送到新屏幕的更好方法是哪种？

如果内联定义，我的数据将如下所示：

data: [
                {
                    id: 1, text: "Furniture", items: [
                      { id: 2, text: "Tables & Chairs", url: "mydomain.com/link1" },
                      { id: 3, text: "Sofas"", url: "mydomain.com/link2" },
                      { id: 4, text: "Occasional Furniture"", url: "mydomain.com/link3" }
                    ]
                },
                {
                    id: 5, text: "Decor", items: [
                      { id: 6, text: "Bed Linen" ", url: "mydomain.com/link4"},
                      { id: 7, text: "Curtains & Blinds" ", url: "mydomain.com/link5"},
                      { id: 8, text: "Carpets" ", url: "mydomain.com/link6"}
                    ]
                }
            ]
        });

Answer 1

你应该使用 dataUrlField to specify which property of your JSON objects contains the navigation URL. In your case, the solution might look something like this (working demo here https://dojo.telerik.com/UvEHomuB):

<div id="panelbar"></div>
<script>
var items = [
            {
                id: 1, text: "Furniture", items: [
                  { id: 2, text: "Tables & Chairs", url: "mydomain.com/link1" },
                  { id: 3, text: "Sofas", url: "mydomain.com/link2" },
                  { id: 4, text: "Occasional Furniture", url: "mydomain.com/link3" }
                ]
            },
            {
                id: 5, text: "Decor", items: [
                  { id: 6, text: "Bed Linen", url: "mydomain.com/link4"},
                  { id: 7, text: "Curtains & Blinds", url: "mydomain.com/link5"},
                  { id: 8, text: "Carpets", url: "mydomain.com/link6"}
                ]
            }
        ];
$("#panelbar").kendoPanelBar({
  dataUrlField: "url",
  dataSource: items
});
</script>

这可能是您问题的最简单解决方案，除非您需要在用户选择节点时执行更具体的操作。关于一般的导航主题，我建议您看一下 kendo SPA framework。它可以帮助您构建一个网站，当用户浏览该网站时，该网站只会重新加载部分页面，而不是强制浏览器重新加载整个页面。希望这有帮助。

如何根据 json 提要中的属性从 JQuery 面板项目导航

How do I navigate from the JQuery panel items based upon an attribute in the json feed

kendo-ui

kendo-panelbar