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

Kendo ui 如何根据json提要中的属性从JQuery面板项导航,kendo-ui,kendo-panelbar,Kendo Ui,Kendo Panelbar,我是剑道新手,认为这很容易,但我很难找到答案。我有一个基于json对象的JQuery面板栏。我希望屏幕导航到json中定义的url。每个项目在json中都有自己独特的url 我考虑过添加一个带有隐藏跨度的模板,并添加一个自定义类和一个数据itemid属性,但不确定我是否考虑过这个问题。我不知道剑道是否有一个简单的方法来做这件事,我错过了 还有,是否有剑道导航方法,或者我应该在函数中使用window.location 最后,我注意到在定义面板栏时我可以使用一种选择方法,然而,许多人似乎只是使用fu

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

我考虑过添加一个带有隐藏跨度的模板,并添加一个自定义类和一个数据itemid属性,但不确定我是否考虑过这个问题。我不知道剑道是否有一个简单的方法来做这件事,我错过了

还有,是否有剑道导航方法,或者我应该在函数中使用window.location

最后,我注意到在定义面板栏时我可以使用一种选择方法,然而,许多人似乎只是使用function onSelect编写函数。。。在脚本标记中。单击面板项目时,哪种方法更适合将用户发送到新屏幕

如果以内联方式定义,我的数据将如下所示:

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"}
                    ]
                }
            ]
        });
您应该使用指定JSON对象的哪个属性包含导航URL。在您的情况下,解决方案可能类似于此处的工作演示:

这可能是解决问题的最简单方法,除非用户选择节点时需要执行更具体的操作。关于一般的导航问题,我建议你看看剑道。它帮助您构建一个站点,当用户在该站点周围导航时,该站点仅重新加载部分页面,而不是强制浏览器重新加载整个页面。希望这有帮助

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