2017-08-17 40 views
9

Mam aplikację Aurelia z pojedynczym modelem widoku. Widok jest podobny do przeglądarki plików, z widokiem drzewa (element niestandardowy) po lewej stronie i widokiem listy po prawej stronie. Model widoku activationStrategy jest zapełniany na podstawie parametrów trasy. Widok drzewa jest wypełniany wywołania AJAX, gdy węzeł jest rozwinięty. Węzły drzewa są również elementem niestandardowym. Widok drzewa jest w pełni niestandardowy i nie używa żadnych wtyczek innych firm.Aurelia: statyczny niestandardowy element w widoku singletonowym

Gdy użytkownik przejdzie na inną trasę, a następnie wróci na tę samą trasę, model widoku zostanie zachowany, ponieważ jest to singleton. Jednak widok drzewa nie był spowodowany tym, że elementy niestandardowe nie są obsługiwane jako single.

Rozumiem uzasadnienie braku obsługi niestandardowych elementów singleton. Chciałbym jednak wiedzieć, jakie byłoby najlepsze podejście, aby w jakiś sposób stworzyć "statyczny" widok drzewa podczas powrotu do tej samej trasy. Jedyne, co do tej pory wymyśliłem, to zachować pełną (rozszerzoną) strukturę drzewa we wstrzykiwanym wspólnym stanie. Jednak wydaje mi się to nieefektywne, ponieważ widok drzewa będzie musiał być renderowany ponownie bez powodu i niepotrzebnie komplikuje mój kod z dodanymi klasami i logiką do tworzenia struktury drzewa, podczas gdy struktura drzewa jest już niejawna w elemencie niestandardowym.

Wszelkie dane wejściowe są mile widziane.

+0

Nie wierzę, że istnieje sposób, aby ponownie zrenderować element niestandardowy po opuszczeniu i powrocie. Po opuszczeniu strony elementy są odłączane. Jeśli wrócisz, zostaną ponownie przyłączeni. –

Odpowiedz

2

Moje podejście byłoby umieścić widoku drzewa niestandardowego elementu na app.html jak (poza .page-host) nav-bar w navigation-skeleton. Następnie niestandardowy element nie powinien być ponownie renderowany przez zmianę trasy.

Wygląda na to, że podobna sytuacja, taka jak ta, którą posiadasz, jest opisana w dokumentach Aurelii. Patrz this tutorial. Również z samouczka:

router-view jest dostarczany przez Aurelia i jest symbolem zastępczym wskazującym, gdzie router powinien renderować bieżącą trasę.

W przypadku konieczności zmiany widoku drzewa na podstawie szczególnych okoliczności lub trasy, agregator zdarzeń może być używany w niestandardowym elemencie widoku drzewa do obsługi takich specjalnych przypadków. Samouczek pokazuje również użycie agregatora zdarzeń do synchronizacji elementów niestandardowych (patrz this part).

Mam nadzieję, że to pomoże.

+0

Przyznam nagrodę za twoją odpowiedź, nawet jeśli wydaje ci się, że jest to hacky. Myślę, że ten scenariusz jest czymś na liście życzeń Aurelii. – Carvellis

+0

Wspomniany przykład tutoriala niestety nie rozwiązuje problemu, ponieważ jest to bardzo prosta aplikacja z tylko jednym modelem podglądu. Jeśli dodasz więcej modeli widoku i przejdziesz na inną trasę, stanie się tak samo, jak w moim przykładzie. – Carvellis

+0

@Carvellis W naszym projekcie używamy podobnego wzoru. Mamy nav-bar, a także side-bar. Oba są elementami niestandardowymi i dodane w 'app.html' jak standardowy element niestandardowy, poza elementem' router-view'. A te elementy są agnostyczne dla zmiany trasy. Dokładniej, elementy są aktywowane tylko raz. Dlatego używamy także agregatora zdarzeń do synchronizowania zmian. Jednak trudno mi skomentować więcej bez konkretnych szczegółów twojego żywiołu. –