时间戳

首页 > 解决方案 > 如何根据 json 提要中的属性从 JQuery 面板项目中导航

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

问题描述

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

我考虑过添加一个带有隐藏跨度的模板并添加一个自定义类和一个 data-itemid 属性，但我不确定我是否在想这个。我不知道剑道是否有一种我想念的简单方法。

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

最后，我注意到在定义面板栏时可以使用一种选择方法，但是，很多人似乎只是在脚本标签中使用函数 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"}
                    ]
                }
            ]
        });

标签： kendo-uikendo-panelbar

解决方案

您应该使用dataUrlField来指定 JSON 对象的哪个属性包含导航 URL。在您的情况下，解决方案可能看起来像这样（工作演示在这里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 框架。它可以帮助您构建一个仅在用户浏览站点时重新加载部分页面的站点，而不是强制浏览器重新加载整个页面。希望这可以帮助。

推荐阅读