javascript — Oracle Jet, как мне создать главную деталь SPA?

Oracle Jet, как мне создать основную деталь SPA?

Фон

Я пытаюсь написать одностраничное приложение (SPA), которое имеет структуру Master -{amp}gt; Detail, поэтому нажимаю на элементы в экранном фильтре, чтобы перейти к другим спискам / деталям. Например у меня есть следующее

  • Список категорий: перечислены категории продуктов питания (например, молочные продукты, мясо и т. Д.). При нажатии на одну из этих категорий список категорий должен быть заменен списком рецептов.
  • Список рецептов: отображает список рецептов для еды в выбранной категории. При нажатии на рецепт список рецептов заменяется деталями рецепта.
  • Детали рецепта: отображает детали выбранного рецепта

Я пытаюсь написать это с помощью Oracle Jet. Я создал 3 модуля

  • CategoryListModule и CategoryListItemModule (принимает идентификатор категории)
  • RecipeListModule (принимает идентификатор категории) и RecipeListItemModule (принимает идентификатор рецепта)
  • RecipeDetailsModule (принимает recipeId)

В каждом модуле он использует стороннюю библиотеку для получения данных с сервера. Для первых двух модулей основной модуль получает основной список отображаемых элементов (т. Е. CategoryList получает список IDS категорий), а его подмодуль получает полную информацию для этого конкретного элемента (например, CategoryListItemModule вызывает сервер для получения вся отображаемая информация для этой категории)

CategoryListModule.html

 {amp}lt;oj-bind-for-each data="[[categoryIds]]" as="categoryId"{amp}gt; {amp}lt;template{amp}gt; {amp}lt;div data-bind="ojModule: {name: 'CategoryListItemModule', params:{categoryId: categoryId} }"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;/oj-bind-for-each{amp}gt; 

CategoryListItemModule.html

 {amp}lt;div {amp}gt; {amp}lt;div data-bind="text:categoryTitle"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div data-bind="text:text:categoryDescription"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Маршрутизатор в main.js

Я создал Router в моем main.js следующим образом

 self.router = oj.Router.rootInstance; self.router.configure({ 'categoryList': {label: 'CategoryListModule', value: 'CategoryListModule', isDefault: true}, 'articleList': {label: 'ArticlesListModule', value: 'ArticlesListModule'}, 'articleDetails': {label: 'ArticleDetailsModule', value: 'ArticleDetailsModule'} }); var viewModel = { router: router } Bootstrap.whenDocumentReady().then( function() { ko.applyBindings(viewModel); } ); 

ВОПРОС

Я не знаю, как кодировать пользователя, нажимающего на определенную категорию, и выводить его в список рецептов.

В Vue / Angular / React я кодировал его с помощью ссылки вокруг html для элемента списка категорий, который указывал маршрутизатору, куда идти, например, в Vue это было что-то вроде следующего

 {amp}lt;router-link :to="{ name: 'recipesList', params: { categoryId: categoryId}}"{amp}gt; {amp}lt;div{amp}gt;{{categoryTitle}}{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;{{categoryDescription}}{amp}lt;/div{amp}gt; {amp}lt;/router-link{amp}gt; 

Я вижу примеры с маршрутизатором, но, похоже, он связан с компонентами Jet, которые я не использую. Например, в Поваренной книге есть пример простого маршрутизатора

 HTML {amp}lt;oj-bind-for-each data="[[router.states]]"{amp}gt; {amp}lt;template{amp}gt; {amp}lt;oj-option value="[[$current.data.id]]"{amp}gt; {amp}lt;span{amp}gt;{amp}lt;oj-bind-text value="[[$current.data.label]]"{amp}gt;{amp}lt;/oj-bind-text{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/oj-option{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;/oj-bind-for-each{amp}gt; JAVA SCRIPT var router = Router.rootInstance; router.configure( { 'pref': { label: 'Preface', value: 'This is the Preface.', isDefault: true }, 'chap1': { label: 'Chapter 1', value: 'This is Chapter 1.' }, 'chap2': { label: 'Chapter 2', value: 'This is Chapter 2.' }, 'chap3': { label: 'Chapter 3', value: 'This is Chapter 3.' } }); var viewModel = { router: router }; 

Я предполагаю, что в этом примере среда Oracle Jet обрабатывает при нажатии элемента в списках компонент «oj-option», поскольку я не вижу нигде кода «onClick».

Я вижу, что вы можете делать привязку событий в Jet и в коде стимулировать маршрутизатор к маршрутизации, но я уверен, что это не может быть правильным решением (например, я мог бы обернуть мой html с помощью или или иметь прослушиватель onClick в JavaScript, чтобы сказать маршрутизатор, чтобы перейти к следующему экрану.

Будем весьма благодарны за любые предложения о том, как реализовать такую ​​навигацию.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector