W rzeczywistości pracujemy z frameworkiem Symfony 2 i Twig jako silnikiem szablonów. Uważamy, że możemy uniknąć powielania kodu warstwy View i korzystać z progresywnego rozszerzenia (p-jax).Progresywne wzmocnienie z YUI3 (Y.App) i Symfony2
Aktualny status:
PJAX nie obsługuje częściowe aktualizacje układ strony oparty na trasie. Naszym celem jest wdrożenie systemu, w którym tylko niektóre "fragmenty strony" (węzły HTML) będą aktualizowane, gdy nawigacja będzie obsługiwana przez Y.App (routing).
W związku z tym rozpoczęliśmy wdrożenie POC w: https://github.com/benjamindulau/PocSfYui/ JavaScript można znaleźć tutaj: https://github.com/benjamindulau/PocSfYui/tree/master/src/Acme/PocBundle/Resources/public/js I Y.App początkowa konfiguracja tam: https://github.com/benjamindulau/PocSfYui/blob/master/src/Acme/PocBundle/Resources/views/layout.html.twig#L66
Chodzi o to, że kiedy po raz pierwszy załadować stronę, wszystko jest obsługiwane po stronie serwera (progresywne rozszerzenie), co oznacza, że cała strona i fragmenty stron są renderowane przez serwer. Przez kolejnych wniosków, które powinny być wykonywane przez Y.App, określiliśmy formatu JSON (jak na poniższym/zdjęć odpowiedzi Path):
{
"title": "MyAwesomeWebsite - Photos", // page <title>,
"fragments": {
"sidebar": "<h2>Sidebar Menu<\/h2><!-- etc.... -->", // ..... maybe an updated menu for active page
"main": "<h2>Photos<\/h2><div id=\"photo-list-container\"><ul id=\"photo-list\"><!-- photo items.... --></ul></div>", // Pre-rendered photo list
},
"templates": {
"photo_item_tpl": "<li data-id=\"{{index}}\"><img src=\"{{url}}\" alt=\"{{title}}\" \/><\/li>" // template used later by Y.App for adding new photos
}
}
Które jest w zasadzie „JSONified” wersja obecnego Treści (trasa).
Po stronie serwera wykryliśmy, że żądanie pochodzi z Y.App i zamiast renderować nasz szablon Twig, wyodrębniamy z niego "bloki" i konstruujemy tę odpowiedź JSON zawierającą fragmenty stron, które wymagają aktualizacji + szablony kierownicy, które klient potrzebuje tej konkretnej strony.
po stronie klienta (Y.App):
- zdefiniowaliśmy PageCompositeView bazową, która reprezentuje cały układ strony, a następnie Page2colLeftView które dziedziczą z tego i instanciates własne sub-widoki: SidebarView, MAINVIEW , HeaderView, ...
- napisaliśmy moduł IO, który tworzy nasze żądania PJAX-Like. Używamy jej zamiast „loadContent” (patrz: https://github.com/benjamindulau/PocSfYui/blob/master/src/Acme/PocBundle/Resources/views/layout.html.twig#L93)
- na pierwszym obciążeniu nazywamy Showview i starają się „re-connect” Strona podrzędne poglądy swoich pojemnikach (patrz: https://github.com/benjamindulau/PocSfYui/blob/master/src/Acme/PocBundle/Resources/public/js/views/page.js#L27)
- w nawigacji strony, Y.App zna strukturę stron.
Say my załadować bezpośrednio z „/” ścieżka zdjęcia w naszej przeglądarce: 1. Serwer czyni całą stronę zawierającą listę zdjęć 2. YUI App tworzy swoją PageCompositeView i ponownie łączy każdego Subfunduszu w celu jego kontener 3. Aplikacja YUI wie, że widok "MainView" (który odpowiada głównej treści) powinien zawierać podmenu "PhotoListView" powiązany z listą modeli "PhotoModelList". Tak więc wywołanie zwrotne w ścieżce "/ photos" tworzy instancję "PhotoView" i ponownie łączy ją z kontenerem (renderowanym przez serwer).
2 i 3 (szczególnie 3) są wykonywane ręcznie.
POC rzeczywiście działa.
Ale zanim przejdziemy dalej, chcielibyśmy uzyskać porady.
Po pierwsze, co sądzisz o tym POC?
Rzeczywiście widzimy plusy & przeciw temu podejściu.
Naszym głównym zmartwieniem jest o tym, jak dostosować Y.App, aby osiągnąć to, co chcemy: - jeden kompozyt widok - Na pierwszym obciążenia, modele są ponownie uwodnione czytając istniejącą DOM (np: gdy lista zdjęć jest renderowany przez serwer) - Im więcej posuwamy się naprzód, tym bardziej uważamy, że brakuje nam czegoś o Y.App i że zrobiliśmy to źle ;-)
Ale pozytywna strona tego wszystkiego jest to, że możemy zbudować pełną asynchroniczną stronę bez tak dużego nakładu pracy.
Naszym głównym celem jest utrzymanie wszystkiego pod kontrolą, zapewniając "prawie kompletne" ogólne rozwiązanie.
Może główne pytanie, które wyłania się z tej wiadomości będzie:
„Czy używamy Y.App właściwą drogę?” ;-)
Co myślisz?
Dzięki, Cya