2017-08-17 55 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'元素之外的標準自定義元素一樣。而這些元素對路線變化是不可知的。更具體地說,元素僅被激活一次。這就是爲什麼我們也使用事件聚合器來同步更改。然而,如果沒有你的元素的具體細節,我很難評論這一點。 –

相關問題