Как перейти от элементов панели JQuery на основе атрибута в фиде json - PullRequest
Новая
       37

Как перейти от элементов панели JQuery на основе атрибута в фиде json

0 голосов
/ 05 июля 2019

Новичок в Кендо и думал, что это будет очень легко, но я изо всех сил пытаюсь найти ответ. У меня есть панель панели JQuery, основанная на объекте json. Я хочу, чтобы экран перемещался по URL-адресу, определенному в json. Каждый элемент имеет свой уникальный URL в JSON.

Я думал о добавлении шаблона со скрытым диапазоном и добавлении пользовательского класса и атрибута 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"}
                    ]
                }
            ]
        });

1 Ответ

1 голос
/ 08 июля 2019

Вы должны использовать 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 framework . Он помогает вам создать сайт, который перезагружает только части страницы, когда пользователь перемещается по сайту, а не заставляет браузер перезагружать всю страницу. Надеюсь, это поможет.

...