Aurelia 多个页面中的多个应用程序答案

【问题标题】：Aurelia multiple apps in multiple pagesAurelia 多个页面中的多个应用程序
【发布时间】：2016-02-29 00:48:06
【问题描述】：

我正在开发一个使用 PHP (Phalcon)、MySQL 和 JQuery 开发的大型网站的第一个生产版本。它不是基于 API 的，尽管有一些 API 可用于某些事情。堆栈略有过时是因为该项目是几年前首次原型化的事实，出于我不会让您感到厌烦的原因，它需要数年才能进入生产开发阶段。

我意识到去年很难重新加载页面，但是当导航到用于不同目的的不同部分时，它们在这种规模的应用程序中也很有意义。由于它目前工作，一旦你进入一个部分，它的行为就像一个使用散列 URL 和 ajax 来更改一个或多个容器等中的内容的单页应用程序。尤其是在 SEO 不是问题的情况下。目前这一切都是用 JQuery 完成的，它开始变得有点混乱和不可维护。还有一些功能，例如导航栏中的通知等，出现在网站的每个页面上，再次通过 ajax 更新和显示。

我的专长是 PHP。 Javascript 不能这么说！但很明显，仅靠 JQuery 是不够的。我需要一个 JS 框架来处理模板/绑定、到合理深度的本地路由以及带有 MV 的 http 等..？结构以更好地组织 JS 方面并保持可维护性。我非常不喜欢 Angular 1，并在我发现 Angular 2 即将伴随重大的重大变化时立即停止学习它。我尝试了 Angular 2 beta，虽然更好，但它并没有让我的船浮起来。我之前偶然发现了 Aurelia alpha，虽然我没有机会玩它，观看视频并阅读它，但它似乎是一个非常好的装备 - 很好的语法，专为现在和未来而设计很快。现在，在第 1 版测试版中，有更多的文档和资源可供学习，我很乐意尽早加入并在此项目中使用它。

我很清楚 Aurelia 能做什么，而且我还有很多东西要学。然而，我目前最大的绊脚石是弄清楚如何构建它并将其整合到这个项目中。

集成

网站的每个部分都需要不同的 Aurelia 应用程序
每个页面可能需要多个 Aurelia 应用程序
所有页面都需要一些 Aurelia 应用程序

我找到了article by Patrick Walters，它似乎解释了如何通过在元素上调用应用程序时命名应用程序来完成此操作； <body aurelia-app="main" start="app">

然后设置一个共享的 main.js 与;

aurelia.start().then(a => {
  let start = a.host.attributes.start.value;
  a.setRoot(start);
});

这似乎有道理，所以我尝试了一下，但将调用放在 div 而不是 body 中。这不起作用，因为host 无法解决任何问题（我的 IDE 在我运行它之前就告诉我了）。我们这里不需要主机名/端口信息，所以我推测作者的意思是用元素替换host？但具体如何？

非常感谢任何有关此类集成的进一步建议。

我在 SO 上看到了类似问题的答案，但他们似乎没有重复使用 main.js，而是复制了它，这似乎不正确。

结构

我尝试使用 src 将文件移动到子目录中，以将内容拆分成一些清晰的结构。我可以让它工作的唯一方法是在配置中为每个添加一个命名路径，例如"welcome*": "dist/welcome/welcome*",。这是最好/唯一的方法吗？

【问题讨论】：

嘿，我很好奇你最终是否找到了一个令人满意的解决方案，可以让你“分组”常见的代码块..

标签： javascript aurelia

【解决方案1】：

我认为您的问题没有正确答案。只有您能够决定哪种策略更适合您的情况。据我所知，您可以使用 Aurelia 实现此策略。但是，我不确定main.js 的重用。

您可以使用以下方式在特定标签内加载 aurelia 应用：

aurelia.start().then(() => aurelia.setRoot('my-root', document.getElementById('some-element'));

如果您想在同一页面中加载多个应用程序，则需要 2 个main.js 文件。这个线程Multiple Aurelia apps on one page 有一个非常有用的示例，即同一页面中有两个应用程序。

在我的理解中，共享同一个页面的应用应该有一个项目结构，也就是说只有一个config.js、src文件夹、dist文件夹等。不共享同一个页面的应用应该有不同的项目结构，使用不同的 config.js、src 文件夹、dist 文件夹（如有必要，使用不同的 Aurelia 版本）。这保证了一个应用程序与另一个应用程序的独立性，防止了重大更改。

当然，这只是我的看法。你可以等待 aurelia 的人进一步指示，他们总是在附近。

希望这会有所帮助！

【讨论】：