Справочная информация
Я пытаюсь написать одностраничное приложение (SPA), которое имеет структуру Master -> Detail, поэтому щелкаю по элементам на экране фильтра вниз к другим спискам / деталям,Например, у меня есть следующий
- Список категорий: перечислены категории продуктов питания (например, молочные продукты, мясо и т. Д.). При нажатии на одну из этих категорий список категорий должен быть заменен на Список рецептов
- Список рецептов: отображает список рецептов для продуктов питания в выбранной категории. При нажатии на рецепт список рецептов заменяется на детали рецепта
- Детали рецепта: отображает детали для выбранного рецепта
Я пытаюсь написать это с помощью Oracle Jet. Я создал 3 модуля
- CategoryListModule и CategoryListItemModule (принимает идентификатор категории)
- RecipeListModule (принимает идентификатор категории) и RecipeListItemModule (принимает идентификатор recipeId)
- RecipeDetailsModule (a recipeId)
В каждом модуле он использует стороннюю библиотеку для получения данных с сервера. Для первых двух модулей основной модуль получает основной список отображаемых элементов (т. Е. CategoryList получает список IDS категорий), а его подмодуль получает полную информацию для этого конкретного элемента (например, CategoryListItemModule вызывает сервер для получениявся отображаемая информация для этой категории)
CategoryListModule.html
<oj-bind-for-each data="[[categoryIds]]" as="categoryId">
<template>
<div data-bind="ojModule:
{name: 'CategoryListItemModule',
params:{categoryId: categoryId} }">
</div>
</template>
</oj-bind-for-each>
CategoryListItemModule.html
<div >
<div data-bind="text:categoryTitle"></div>
<div data-bind="text:text:categoryDescription"></div>
</div>
Маршрутизатор в main.js
Я создал Маршрутизатор в моем main.js следующим образом
self.router = oj.Router.rootInstance;
self.router.configure({
'categoryList':
{label: 'CategoryListModule',
value: 'CategoryListModule',
isDefault: true},
'recipeList':
{label: 'RecipeListModule',
value: 'RecipeListModule'},
'recipeDetails':
{label: 'RecipeDetailsModule',
value: 'RecipeDetailsModule'}
});
var viewModel = {
router: router
}
Bootstrap.whenDocumentReady().then(
function() {
ko.applyBindings(viewModel);
}
);
ВЫПУСК
Я не знаю, как кодировать пользователя, нажимающего на определенную категорию, и выводить его в список рецептов.
В Vue / Angular / React я закодировал его с помощью ссылки вокруг html для элемента списка категорий, который указывал маршрутизатору, куда идти, например, в Vue это было что-то вроде следующего
<router-link :to="{ name: 'recipesList', params: { categoryId: categoryId}}">
<div>{{categoryTitle}}</div>
<div>{{categoryDescription}}</div>
</router-link>
Я вижу примеры с маршрутизатором, но, похоже, он связан с компонентами Jet, которые я не использую. Например, в Поваренной книге он имеет пример простого маршрутизатора
HTML
<oj-bind-for-each data="[[router.states]]">
<template>
<oj-option value="[[$current.data.id]]">
<span><oj-bind-text value="[[$current.data.label]]"></oj-bind-text></span>
</oj-option>
</template>
</oj-bind-for-each>
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, чтобы маршрутизатор мог перейти к следующему экрану.
Будем весьма благодарны за любые предложения по реализации такой навигации.
ОБНОВЛЕНИЕ
Я получил гораздо больше с этим. Я узнал, как вы можете использовать код для указания маршрутизатора для маршрутизации. Поэтому в моем "CategoryListItemModule.html" я добавил "onClick"в div
<div on-click="[[onClicked]]>
<div data-bind="text:categoryTitle"></div>
<div data-bind="text:text:categoryDescription"></div>
</div>
Я изменил конфигурацию маршрутизатора в" main.js "на
self.router = oj.Router.rootInstance;
self.router.configure({
'categoryList':
{label: 'CategoryListModule',
value: 'CategoryListModule',
isDefault: true},
'recipeList/{id}':
{label: 'RecipeListModule',
value: 'RecipeListModule'},
'recipeDetails':
{label: 'RecipeDetailsModule',
value: 'RecipeDetailsModule'}
});
В" CategoryListItemModule.js "я получаю маршрутизатор и реализую" onCli "cked "method
define(['ojs/ojcore', 'ojs/ojrouter', 'knockout', '],
function (oj, Router, ko) {
function AViewModel(params) {
....
router = Router.rootInstance;
....
this.onClicked= function(event) {
router.go('recipes/'+ categoryId);
}
....
};
....
Теперь, когда пользователь нажимает на определенную категорию в списке категорий (с, скажем, идентификатором 123), вызывается функция" onClicked ", которая сообщает маршрутизатору о необходимости маршрутизации" / recipeList /123, который должен загрузить RecipeListModule с идентификатором 123, доступным изнутри этого модуля.
Однако это все еще не работает должным образом, так как Jet не может найти RecipeListModule .js / RecipeListModule.html в качестве пути, который он использует для попытки инайти эти файлы в моем проекте есть дополнительные «рецепты» в пути. Я записал следующее отдельное сообщение для этой проблемы просто в эту последнюю часть.
Маршрутизация Oracle Jet добавляет дополнительную папку в путь при попытке получить файлы дочернего модуля