2017-08-17 56 views
9

我有一个单例视图模型的Aurelia应用程序。该视图与文件浏览器类似,左侧为树视图(自定义元素),右侧为列表视图。视图模型activationStrategyinvokeLifecycle,并且基于路由参数填充列表视图。当节点展开时,树视图会填充AJAX调用。树节点也是一个自定义元素。树视图是完全自定义的,不使用任何第三方插件。Aurelia:单例视图中的静态自定义元素

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

我明白不支持单身人员自定义元素背后的原因。我想知道在导航回相同的路线时,以何种方式创建“静态”树视图的最佳方法是什么。到目前为止,我唯一想到的是将一个完整(扩展)的树结构保持在注入共享状态。然而,这对我来说似乎效率低下,因为树视图必须无故再次渲染,并且由于添加了用于创建树结构的类和逻辑而不必要地使我的代码复杂化,而树结构已经隐含在自定义元素中。

任何输入表示赞赏。

+0

我不相信有一种方法可以在离开和回来后再次渲染自定义元素。当您离开该页面时,这些元素将被分离。如果你回来,他们再次连接。 –

回答

2

我的做法是把树视图自定义元素上app.htmlnav-bar(的.page-host外)在navigation-skeleton。然后,自定义元素不应该通过路由更改再次呈现。

在Aurelia文档中描述了类似的情况,就像您拥有的那样。请参阅this tutorial。同样来自教程:

router-view由Aurelia提供,它是一个占位符,表示路由器应该呈现当前路由的位置。

如果您需要根据某些特殊情况或路线更改树视图,则可以在树视图自定义元素中使用事件聚合器来处理这些特殊情况。本教程还显示使用事件聚合器来同步自定义元素(请参阅this part)。

希望这会有所帮助。

+0

我会奖励你的答案,尽管它感觉像一个哈克解决方案。我想这个场景是Aurelia的愿望清单。 – Carvellis

+0

您提到的教程示例不幸并不能解决问题,因为它只是一个非常简单的应用程序,只有一个viewmodel。如果你想添加更多的视图模型,并且将导航到另一个路线,那么就会发生在我的例子中。 – Carvellis

+0

@Carvellis在我们的项目中,我们使用了类似的模式。我们有一个导航栏以及一个侧面导航栏。这两个都是自定义元素,并且在'app.html'中添加,就像'router-view'元素之外的标准自定义元素一样。而这些元素对路线变化是不可知的。更具体地说,元素仅被激活一次。这就是为什么我们也使用事件聚合器来同步更改。然而,如果没有你的元素的具体细节,我很难评论这一点。 –

相关问题