javascript - 嵌套的 Aurelia 应用程序

Question

根据 Aurelia 的创建者 Rob Eisenberg 的说法，应该可以有 nested aurelia applications彼此内部。

由于他在上面的链接中提到的示例不再公开，如果这里的任何人都可以进一步详细说明，甚至链接或写一个 small example，那将非常有帮助。如何实现这种嵌套。

我希望用 Aurelia 创建的主要应用程序和界面将包含一个 Windows XP 桌面风格的外壳，在其中可以从开始菜单打开嵌套的 Aurelia 应用程序，在内部的嵌入式窗口中打开主要应用程序“Windows 桌面区域”- 就像 Windows 或文件资源管理器将在普通 Windows XP 操作系统中打开，但在 SPA 中。

为了使其真正可扩展，我更愿意保留将嵌套的 aurelia 应用程序放置在主应用程序根文件夹之外的文件夹中的可能性，而不是使用磁盘上的文件/文件夹路径从主应用程序链接到它们。

所以为了保持“简单”，想象一下 this would be the main application (Windows 外壳)- 单击该按钮会打开一个窗口，该窗口可以最小化、调整大小或四处移动。在该窗口中，将打开另一个 aurelia 应用程序。最后，您希望能够将某些状态从主应用程序传输到嵌套应用程序，例如。语言或数据库。

如果可能的话，如果可以从主应用程序根文件夹外部定位和引用嵌套应用程序，那将是最佳选择。

Answer 1

这是一个例子:https://gist.run?id=7cda93aa0a225805ddf6

app.html

<template>
  <require from="./child-app"></require>

  <child-app main.bind="main1"></child-app>
  <child-app main.bind="main2"></child-app>
</template>

app.js

export class App {
  main1 = './one/app';
  main2 = './two/app';
}

child-app.js

import {
  Aurelia,
  noView,
  bindable,
  inject,
  Container
} from 'aurelia-framework';
import {Loader} from 'aurelia-loader';

@noView()
@inject(Loader, Element)
export class ChildApp {
  @bindable main;

  constructor(loader, element) {
    this.host = element;
    this.app = new Aurelia(this.loader, new Container());
    this.app.use.standardConfiguration();
  }

  mainChanged() {
    this.app.start().then(a => a.setRoot(this.main, this.host));
  }
}