Oracle Jet我如何创建主要详细信息SPA？

Question

背景

我正在尝试编写具有母版->详细信息结构的单页应用程序（SPA），因此，单击屏幕上的项目可筛选出其他列表/详细信息。例如，我有以下

• 类别列表：列出食物的类别（例如，乳制品，肉类等）。当您单击这些类别之一时，类别列表将替换为“配方列表”]
• 食谱列表：显示所选类别中食物食谱的列表。单击配方后，“配方列表”将替换为“配方详细信息”>
• 食谱详细信息：显示所选食谱的详细信息

我正在尝试使用Oracle Jet编写此文件。我已经创建了3个模块

• CategoryListModule和CategoryListItemModule（带有categoryId）
• [RecipeListModule（采用categoryId）和RecipeListItemModule（采用食谱ID）] >>
• RecipeDetailsModule（带有一个chemeId）

在每个模块中，它使用第三方库从服务器获取数据。对于前两个模块，主模块获取要显示的基本项目列表（即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中创建了一个Router，如下所示

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，因为我在任何地方都看不到“ onClick”代码。
[我看到您可以在Jet中进行事件绑定，并在代码中激发路由器进行路由，但是我确定这不是正确的解决方案（例如，我可以用或将HTML换行，并在JavaScript中使用onClick侦听器告诉路由器转到下一个屏幕。
关于如何实现这种导航的任何建议将不胜感激。

UPDATE

我对此有了很多了解。我发现了如何使用代码告诉路由器进行路由。因此，在我的“ CategoryListItemModule.html”中，我向div添加了“ onClick”

<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”中，我得到了路由器并实现了“ onClicked”方法
define(['ojs/ojcore', 'ojs/ojrouter', 'knockout', '],
function (oj, Router, ko) {
    function AViewModel(params) {
        ....
        router = Router.rootInstance;
        ....
        this.onClicked= function(event) {
            router.go('recipes/'+ categoryId);
        }
        ....
    };
   ....
现在，当用户单击类别列表中的特定类别（ID为123时）时，将调用“ onClicked”功能，该功能告诉路由器路由到“ / recipeList / 123”，该路由应加载ID为123的RecipeListModule可从该模块内部访问。
但是，由于Jet无法找到RecipeListModule .js / RecipeListModule.html，因为它尝试在我的项目中查找这些文件的路径，因此该路径仍然无法正常工作，该路径中还有多余的“食谱”。我已针对该问题单独记录了以下内容，以简化本文的最后一部分。
Oracle Jet routing is adding extra folder in path when trying to get child module files

背景，我正在尝试编写一个具有母版->详细信息结构的单页应用程序（SPA），因此，单击屏幕上的项目可以过滤到其他列表/详细信息。例如我有...

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

我在单独的帖子中剩下的问题也有解决方案。

Answer 1

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