Oracle Jet маршрутизация добавляет дополнительную папку в путь при попытке получить файлы дочернего модуля - PullRequest
Новая
       37

Oracle Jet маршрутизация добавляет дополнительную папку в путь при попытке получить файлы дочернего модуля

0 голосов
/ 21 октября 2019

Проблема

Я пытаюсь написать одностраничное приложение (SPA), где изначально приложение показывает модуль «A». Когда пользователь щелкает элемент в «A», отображается модуль «B», и ему передается идентификатор от A. (Например, A отображает список идентификаторов сотрудников, щелчок по одному сотруднику означает, что B отображает сведения об этом сотруднике)

Первоначально мой URL-адрес: 

http://localhost:8000/

При нажатии на элемент в A с идентификатором 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 Cookbook

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

Я использую образец из OracleJet Cookbook для маршрутизатора с параметрами состояния. Если вы откроете этот пример в полноэкранном режиме, вы увидите, что URL-адрес первого экрана (A) равен 

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

1 Ответ

0 голосов
/ 22 октября 2019

Обновленный ответ после получения дополнительной информации

Я наконец-то решил это с некоторыми советами коллеги.

Убедитесь, что "baseUrl", указанный в вашем requireJS, равенабсолютное значение при использовании маршрутизатора urlPathAdapter.

main.js 

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

BaseUrl RequireJS используется в качестве исходного местоположения для RequireJS для загрузки его относительного содержимого. Большую часть времени он установлен на «js», но это не будет хорошо работать с маршрутизатором UrlPathAdapter. Это связано с тем, что маршрутизатор изменит URL-адрес, к которому RequireJS пытается добавить свой путь, когда он не является абсолютным. В результате путь requireJS, который пытается использовать для получения своего содержимого, недействителен.

Например:

  • вы получили доступ к своему приложению с помощью протокола URL ": // server:port / my / app "
  • RequireJS попытается получить доступ к содержимому, добавив" js ", например," protocol: // server: port / my / app / js / viewModel / ... ", который работает, когдавы находитесь в корне своего приложения
  • вы используете маршрутизатор для перехода к другому URL-адресу, теперь URL-адрес "протокол: // сервер: порт / мой / app / newPath"
  • Теперь RequireJS попытается использовать URL-адрес «протокол: // сервер: порт / my / app / newPath / js / viewModel», что неверно
  • Когда базовый URL RequireJS является абсолютным, онвсегда будет добавляться к URL-адресу приложений, например, «protocol: // server: port / my / app / js / viewModel», где будет найдено содержимое

ПРИМЕЧАНИЕ. Я также обеспечил baseUrlв "path-mapping" также было абсолютным path_mapping.json 

{
  "baseUrl": "/js",

Другое решение состояло в том, чтобы изменить мой маршрутизатортер от стандартного urlPathAdapter до urlParamAdapter. 

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