Oracle Jet 路由在尝试获取子模块文件时在路径中添加额外的文件夹

Question

问题

我正在尝试编写一个单页应用程序 (SPA)，该应用程序最初显示模块 "A"。当用户单击 "A" 中的一个元素时，将显示模块 "B" 并从 A 传递一个 ID。（例如 A 显示员工 ID 列表，单击一个员工意味着 B 将显示详细信息那个员工）

最初我的 URL 是：

http://localhost:8000/

点击 A 中 id 为 123 的项目，URL 变为以下正确的：

http://localhost:8000/A/123

但是，我收到以下错误

GET http://localhost:8000/b/js/viewModels/B.js net::ERR_ABORTED 404 (Not Found)
ojModule failed to load viewModels/B
ojlogger.js:257 Error: Script error for "viewModels/B"

不知道为什么改了路径，多了一个"/b/"来获取B.js/B.html文件。当然它找不到这个文件，因为我的项目结构中没有这样的文件夹"b"。

Oracle Jet 说明书示例

https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=router&demo=stateParams

我将 OracleJet Cookbook 中的示例用于带有状态参数的路由器。如果您以全屏模式打开此示例，您会看到第一个屏幕 (A) 的 URL 是

https://www.oracle.com/webfolder/technetwork/jet/content/router-stateParams/demo.html

点击列表中的一个人将 URL 更改为以下内容，这与我的相同。

https://www.oracle.com/webfolder/technetwork/jet/content/router-stateParams/demo.html/detail/7566

这本食谱示例不像我的那样出错。

我的代码

项目结构

src
 |- index.html
 |- js
     |- main.js
     |- viewModels
         |- A.js
         |- B.js
     |- views 
         |- A.html
         |- B.html

index.html

....
<body>
    <div id="routing-container">
        <div data-bind="ojModule:router.moduleConfig"></div>
    </div>
</body>
....

main.js

requirejs.config(
{
    baseUrl: 'js',
    ....
}

require(['ojs/ojbootstrap', 'ojs/ojrouter', 'knockout', 'ojs/ojmodule-element-utils', 'ojs/ojknockout', 'ojs/ojmodule'],
function (Bootstrap, Router, ko) { 

    // Retrieve the router static instance and configure the states
    var router = Router.rootInstance;
    router.configure({        
        'a':      {label: 'a', value: 'A', isDefault: true},
        'b/{id}': {label: 'b', value: 'B'  }
    });

    var viewModel = {
        router: router
    };

    Bootstrap.whenDocumentReady().then(
        function(){
         ko.applyBindings(viewModel, document.getElementById('routing-container'));            
         Router.sync();
     }
   );

});

A.html

....
<div on-click="[[onClicked]]" >
    ....    
</div>
...

A.js

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

    }

    return AViewModel;
}

尝试次数

我尝试在 "main.js" 中添加以下内容之一，但没有任何区别。

Router.defaults['baseUrl'] = '';
Router.defaults['baseUrl'] = 'js';
Router.defaults['baseUrl'] = '/js';
Router.defaults['baseUrl'] = '/js/';

Answer 1

查看更多信息后更新了答案

在同事的建议下，我终于解决了这个问题。

当您使用 urlPathAdapter 路由器时，确保在您的 requireJS 中指定的 "baseUrl" 是绝对的。

main.js

requirejs.config(
{
    baseUrl: '/js',

RequireJS 的baseUrl 用作RequireJS 下载其相关内容的起始位置。大多数时候它设置为 "js" 但这不能很好地与 UrlPathAdapter 路由器一起工作。这是因为当 RequireJS 不是绝对路径时，路由器将更改 URL 尝试添加其路径。结果是 requireJS 试图用来获取其内容的路径无效。

例如：

您使用 URL "protocol://server:port/my/app"
RequireJS 将尝试通过附加 "js" 来访问内容，例如 "protocol://server:port/my/app/js/viewModel/..." 当您处于应用程序的根目录时它会起作用
您使用路由器导航到另一个 url，url 现在是 "protocol://server:port/my/app/newPath"
现在 RequireJS 将尝试使用 URL "protocol://server:port/my/app/newPath/js/viewModel" 这是错误的
当 RequireJS 基础URL 是绝对的时，它将始终添加到应用程序 URL，例如 "protocol://server:port/my/app/js/viewModel" 内容所在的位置

注意：我还确保 "path-mapping" 中的 baseUrl 也是绝对的 path_mapping.json

{
  "baseUrl": "/js",

另一个解决方案是将我的路由器适配器从默认的 urlPathAdapter 更改为 urlParamAdapter。

Router.defaults.urlAdapter = new Router.urlParamAdapter();
var router = Router.rootInstance;

Oracle Jet 路由在尝试获取子模块文件时在路径中添加额外的文件夹

Oracle Jet routing is adding extra folder in path when trying to get child module files

router

jet

single-page-application