尝试获取子模块文件时，Oracle Jet 路由会在路径中添加额外的文件夹 [英] Oracle Jet routing is adding extra folder in path when trying to get child module files

问题描述

问题

我正在尝试编写一个单页应用程序 (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(未找到)ojModule 无法加载 viewModels/Bojlogger.js:257 错误:viewModels/B"的脚本错误

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

Oracle Jet Cookbook 示例

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|- 视图模型|- A.js|- B.js|- 意见|- A.html|- B.html

index.html

<代码>....<身体><div id="路由容器"><div data-bind="ojModule:router.moduleConfig"></div>

....

main.js

requirejs.config({baseUrl: 'js',....}需要(['ojs/ojbootstrap', 'ojs/ojrouter', 'knockout', 'ojs/ojmodule-element-utils', 'ojs/ojknockout', 'ojs/ojmodule'],功能(引导程序，路由器，ko){//检索路由器静态实例并配置状态var router = Router.rootInstance;路由器配置({'a': {label: 'a', value: 'A', isDefault: true},'b/{id}': {label: 'b', value: 'B' }});var viewModel = {路由器:路由器};Bootstrap.whenDocumentReady().then(功能(){ko.applyBindings(viewModel, document.getElementById('routing-container'));路由器同步()；});});

A.html

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

...

A.js

define(['ojs/ojcore', 'ojs/ojrouter', '淘汰赛', '],功能(oj，路由器，ko){函数 AViewModel(params) {....路由器 = Router.rootInstance;....this.onClicked= 函数(事件){router.go('b/'+ 123);}....};}返回 AViewModel；}

尝试

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

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

解决方案

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

我终于通过一位同事的建议解决了这个问题.

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

main.js

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

RequireJS 的 baseUrl 用作 RequireJS 下载其相关内容的起始位置.大多数情况下，它设置为js"，但这不适用于 UrlPathAdapter 路由器.这是因为路由器将更改 RequireJS 尝试将其路径添加到的 URL(当它不是绝对路径时).结果是 requireJS 试图用来获取其内容的路径无效.

例如:

• 您使用 URLprotocol://server:port/my/app"访问了您的应用
• RequireJS 将尝试通过附加js"来访问内容，例如protocol://server:port/my/app/js/viewModel/..."，这在您位于应用程序的根目录时有效
• 您使用路由器导航到不同的 url，该 url 现在是protocol://server:port/my/app/newPath"
• 现在 RequireJS 将尝试使用错误的 URLprotocol://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;

Problem

I am trying to write a Single Page Application (SPA) where initially the app shows module "A". When the user clicks an element in "A", module "B" is displayed and is passed an ID from A. (For example A displays a list of Employee IDs, clicking on one employee means B will display details of that employee)

Initially my URL is :

http://localhost:8000/

Clicking on an item in A with an id of 123, the URL changes to following which is correct:

http://localhost:8000/A/123

However, I get the following error

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"

I do not know why it has changed the path and added an extra "/b/" to get the B.js/B.html file. Of course it can not find this file as there is no such folder "b" in my project structure.

Oracle Jet Cookbook Sample

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

I am using the sample in the OracleJet Cookbook for a Router with State Parameters. If you open this example in full screen you see that the URL for the first screen (A) is

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

Clicking on a person in the list changes the URL to the following, which is the same as mine.

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

This cookbook sample does not error like mine.

My Code

project structure

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

Attempts

I have tried adding one of the following in "main.js" and it doesn't make a difference.

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

解决方案

Updated answer after gleeming more information

I have finally resolved this with some advice from a colleague.

Make sure the "baseUrl" specified in your requireJS is absolute when you are using the urlPathAdapter router.

main.js

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

RequireJS's baseUrl is used as the starting location for RequireJS to download its relative content. Most of the time its set to "js" but that will not work nicely with the UrlPathAdapter router. This is because the router will change the URL which RequireJS tries to add its path to when its not absolute. The result is that the path requireJS is trying to use to get its content is invalid.

For example:

• you accessed your app with the URL "protocol://server:port/my/app"
• RequireJS will try and access content by appending "js", for example "protocol://server:port/my/app/js/viewModel/..." which works when you are at the root of your application
• you use the router to navigate to a different url, the url is now "protocol://server:port/my/app/newPath"
• now RequireJS will try and use the URL "protocol://server:port/my/app/newPath/js/viewModel" which is wrong
• When the RequireJS baseURL is absolute, it will always be added to the apps URL, for example "protocol://server:port/my/app/js/viewModel" where the content will be found

NOTE: I also ensured the baseUrl in "path-mapping" was absolute as well path_mapping.json

{
  "baseUrl": "/js",

Another solution was to change my router adapter from the default urlPathAdapter to urlParamAdapter.

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

这篇关于尝试获取子模块文件时，Oracle Jet 路由会在路径中添加额外的文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！