Javascript Oracle Jet如何创建主细节水疗中心？

背景

我正在尝试编写一个单页应用程序（SPA），它有一个Master->Detail结构，所以点击屏幕中的项目可以过滤到其他列表/详细信息。 例如，我有以下几点

<router-link :to="{ name: 'recipesList', params: { categoryId: categoryId}}">      
    <div>{{categoryTitle}}</div>
    <div>{{categoryDescription}}</div>
</router-link>

• 类别列表：列出食品类别（即乳制品、肉类等）。单击其中一个类别时，类别列表将替换为配方列表
• 配方列表：显示所选类别中的食品配方列表。单击配方时，配方列表将替换为配方详细信息
• 配方详细信息：显示所选配方的详细信息

我正试图用Oracle Jet写这篇文章。我已经创建了3个模块

• CategoryListModule和CategoryListModule（采用categoryId）
• RecipeListModule（采用类别ID）和RecipeListModule（采用recipeId）
• RecipeDetailsModule（接受recipeId）

在每个模块中，它使用第三方库从服务器获取数据。对于前两个模块，主模块获取要显示的项目列表的基本信息（即CategoryList获取类别ID列表），其子模块获取该特定项目的完整信息（例如CategoryListEmModule调用服务器获取该类别的所有显示信息）

CategoryListModule.html

问题

我不知道如何编码用户点击特定类别并将用户带到配方列表

在Vue/Angular/React中，我用一个围绕类别列表项的html链接对其进行编码，告诉路由器去哪里，例如在Vue中，它类似于以下内容

<router-link :to="{ name: 'recipesList', params: { categoryId: categoryId}}">      
    <div>{{categoryTitle}}</div>
    <div>{{categoryDescription}}</div>
</router-link>

在“categorylistitemodule.js”中，我得到了路由器并实现了“onClicked”方法

现在，当用户单击类别列表中的特定类别（比如id 123）时，将调用“onClicked”函数，该函数告诉路由器路由到“/recipeList/123”，该路由器应加载recipeList模块，id 123可从该模块内部访问

但是，这仍然无法正常工作，因为Jet无法找到RecipeListModule.js/RecipeListModule.html，因为它用于尝试在我的项目中查找这些文件的路径中有一个额外的“配方”。我已经为本期单独记录了以下内容，以简化最后一篇文章

---

我的原始帖子中的更新显示了创建主->细节SPA的解决方案

我在另一篇文章中提到的剩余问题也有一个解决方案。

我在问题中添加了“更新”部分，因为我有进一步的了解，但是我仍然坚持完整的解决方案

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); 
        }
    );

<router-link :to="{ name: 'recipesList', params: { categoryId: categoryId}}">      
    <div>{{categoryTitle}}</div>
    <div>{{categoryDescription}}</div>
</router-link>

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

<div on-click="[[onClicked]]>
    <div data-bind="text:categoryTitle"></div>
    <div data-bind="text:text:categoryDescription"></div>
</div>

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'}
    });

define(['ojs/ojcore', 'ojs/ojrouter', 'knockout', '],
function (oj, Router, ko) {
    function AViewModel(params) {
        ....
        router = Router.rootInstance;
        ....
        this.onClicked= function(event) {
            router.go('recipes/'+ categoryId);
        }
        ....
    };
   ....