Aurelia:单例视图中的静态自定义元素

时间:2017-08-17 08:50:34

标签: javascript typescript aurelia aurelia-router

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

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

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

赞赏任何意见。

1 个答案:

答案 0 :(得分:2)

我的方法是将树视图自定义元素放在app.html nav-bar.page-hostrouter-view之外) <img class="" [src]="myfunction(1)"> 。然后,不应通过更改路径再次呈现自定义元素。

Aurelia docs中描述了类似的情况,就像你所拥有的情况一样。请参阅navigation-skeleton。同样来自教程:

  

private userImage:string="" //default image path myfunction(input){ return this.userImage ? this.userImage : "app/portal/market-place/marketplace-banner.jpg" } 由Aurelia提供,是占位符,指示路由器应呈现当前路由的位置。

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

希望这有帮助。