时间戳

首页 > 解决方案 > 尝试获取子模块文件时，Oracle Jet 路由在路径中添加了额外的文件夹

single-page-application - 尝试获取子模块文件时，Oracle Jet 路由在路径中添加了额外的文件夹

问题描述

问题

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

最初我的网址是： 

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

索引.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();
     }
   );

});

一个.html

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

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/';

标签： single-page-applicationrouterjet

解决方案

在获得更多信息后更新答案

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

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

main.js

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

RequireJS 的 baseUrl 用作 RequireJS 下载其相关内容的起始位置。大多数情况下，它设置为“js”，但这不能很好地与 UrlPathAdapter 路由器一起使用。这是因为当 RequireJS 不是绝对路径时，路由器会更改 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 baseURL 是绝对的时，它总是会添加到应用程序的 URL 中，例如“protocol://server:port/my/app/js/viewModel” 将在其中找到内容

注意：我还确保“路径映射”中的 baseUrl 也是绝对的 path_mapping.json

{
  "baseUrl": "/js",

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

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

推荐阅读