如何覆盖 Aurelia ViewModel 分辨率？

Question

Aurelia 框架对约定优于配置有很强的吸引力。

在它的文档 sample app (typescript) 中，我们有这样的源代码结构：

.
├── index.html
├── config.js
├── src
    ├── main.ts
    ├── app.ts         // viewmodel
    ├── app.html       // view
    ├── welcome.ts     // viewmodel
    ├── welcome.html   // view
    ├── users.ts       // viewmodel
    ├── users.html     // view
    (...)

出于组织目的，我宁愿将每个 view/viewmodel/private components/etc 的来源组织在各自的文件夹中，获得如下文件夹结构：

.
├── index.html
├── config.js
├── src
    ├── main.ts
    ├── app
        ├── app.ts            // viewmodel
        ├── app.html          // view
    ├── welcome
        ├── welcome.ts        // viewmodel
        ├── welcome.html      // view
    ├── users
        ├── users.ts          // viewmodel
        ├── user-info.ts      // view-specific component (1)
        ├── user-detail.ts    // view-specific component (2)
        ├── users.html        // view
    (...)

有没有办法实现自定义解析器或覆盖约定？也就是说，我想在我的 Router 配置中避免显式路径样板代码。有什么建议吗？

Answer 1

在main.js中，.setRoot()变为.setRoot('app/app')。这是必需的，因为没有参数的 setRoot 假定项目根目录中有一个 app.js。

路由配置更改仅限于moduleId...这：

config.map([
  { route: ['', 'welcome'], name: 'welcome',      moduleId: 'welcome',      nav: true, title: 'Welcome' },
  { route: 'users',         name: 'users',        moduleId: 'users',        nav: true, title: 'Github Users' },
]);

变成这样：

config.map([
  { route: ['', 'welcome'], name: 'welcome',      moduleId: 'welcome/welcome',    nav: true, title: 'Welcome' },
  { route: 'users',         name: 'users',        moduleId: 'users/users',        nav: true, title: 'Github Users' },
]);

不确定这是否回答了您的问题。您是否正在寻找路由器将 moduleId 从 'welcome' 转换为 'welcome/welcome' 的方法？

Answer 2

有一个解决方法。

我看到您不想一直输入具体路径，例如：welcome/welcome。因此，您可以将路由数组放在一个变量中，然后根据您的模式替换所有 moduleId。像这样：

let routes = [
    { route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' },
    { route: 'test', name: 'test', moduleId: 'test', nav: true, title: 'Test' },
 ];

updateRoutes(routes);

config.map(routes);

更新路线功能：

 function updateRoutes(routes) {
     for (i = 0; i < routes.length; i++) {
        let route = routes[i];
        if (route.moduleId.indexOf('/') === -1) {
            route.moduleId = `${route.moduleId}/${route.moduleId}`;
            routes[i] = route;
        }
     }
 }

因此，welcome 变为 welcome/welcome。请注意，如果其值中没有“/”，该函数将仅替换 moduleId；

使用这种方式，您不是 "hurting" 框架，如@JeremyDanyow 的评论中所述。

如何覆盖 Aurelia ViewModel 分辨率？

How to override Aurelia ViewModel resolution?

single-page-application

typescript

aurelia