Aurelia：单例视图中的静态自定义元素答案

【问题标题】：Aurelia: static custom element in singleton viewAurelia：单例视图中的静态自定义元素
【发布时间】：2017-09-03 13:02:46
【问题描述】：

我有一个带有单例视图模型的 Aurelia 应用程序。该视图类似于文件浏览器，左侧是树视图（自定义元素），右侧是列表视图。视图模型activationStrategy 是invokeLifecycle，列表视图是根据路由参数填充的。展开节点时，树视图会填充 AJAX 调用。树节点也是一个自定义元素。树视图是完全自定义的，不使用任何 3rd 方插件。

当用户导航到另一条路线，然后又回到同一条路线时，视图模型将被保留，因为它是一个单例。但是，树视图不是因为不支持作为单例的自定义元素。

我理解不支持单例自定义元素的原因。但是，我想知道在导航回同一条路线时以某种方式创建“静态”树视图的最佳方法是什么。到目前为止，我唯一想到的是将完整（扩展）的树结构保持在注入共享状态。然而，这对我来说似乎效率低下，因为树视图必须无缘无故地再次呈现，并且它使我的代码不必要地复杂化，添加了用于创建树结构的类和逻辑，而树结构已经隐含在自定义元素中。

感谢任何输入。

【问题讨论】：

我不相信有办法在离开和回来后不再呈现自定义元素。当您离开页面时，元素将被分离。如果您回来，它们会再次连接。

标签： javascript typescript aurelia

【解决方案1】：

我的方法是将树形视图自定义元素放在app.html 上，就像navigation-skeleton 中的nav-bar（在.page-host 之外）一样。然后不应通过更改路由再次呈现自定义元素。

Aurelia 文档中似乎描述了类似的情况，就像您所遇到的情况一样。请参阅this tutorial。同样来自教程：

router-view 由 Aurelia 提供，是一个占位符，指示路由器应在何处呈现当前路由。

如果您需要根据某些特殊情况更改树视图，或者路由，则可以在您的树视图自定义元素中使用事件聚合器来处理此类特殊情况。本教程还展示了使用事件聚合器来同步自定义元素（参考this part）。

希望这会有所帮助。

【讨论】：

我会奖励你的答案，即使它感觉像是一个 hacky 解决方案。我想这个场景是 Aurelia 的愿望清单。
不幸的是，您提到的教程示例并没有解决问题，因为它是一个非常简单的应用程序，只有一个视图模型。如果您要添加更多视图模型并导航到另一条路线，则会发生与我的示例相同的情况。
@Carvellis 在我们的项目中，我们使用了类似的模式。我们有一个导航栏，以及一个侧导航栏。这两个都是自定义元素，像标准自定义元素一样添加到app.html 中，在router-view 元素之外。这些元素与路由更改无关。更具体地说，元素仅被激活一次。这就是为什么我们还使用事件聚合器来同步更改。但是，如果没有您元素的具体细节，我很难对此发表更多评论。