Obecnie istnieje wiele frameworków po stronie klienta wiążących dane (Ember, kręgosłup, knockout i Angular są popularnymi, o których mi wiadomo).Jak wyświetlać wstępnie renderowane szablony wiążące dane
Problem z tymi wszystkimi ramami jest początkowym obciążeniem. Musisz zaznaczyć swój HTML za pomocą symboli zastępczych iw zależności od tego, jak to zrobisz, klient zobaczy puste fragmenty strony lub losowe {{ markup }}. Co więcej, większość tych szablonów jest parsowana po stronie klienta, a nie wstępnie skompilowana.
Idealnie, gdy użytkownik po raz pierwszy wejdzie na stronę, wyświetli mu się wstępnie wypełniony kod HTML z wszystkimi wypełnionymi danymi, a to da im coś do obejrzenia, podczas gdy wszystkie wstępnie skompilowane szablony JavaScript będą ładowane i Wczytanie powiązań danych. Od tego momentu korzystałby z routingu po stronie klienta, a my po prostu mielibyśmy JSON na drucie.
Mogę zrobić połowę tego już z Jade lub z kilku innych języków szablonów, które mogą być renderowane po stronie serwera lub klienta. Rzeczą, której nie potrafię zrozumieć, jest to, jak mógłbym ładnie zagrać z jedną z tych ram.
Na przykład w Knockout, Pana zdaniem, może wyglądać następująco:
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
W Jade, chciałbym zdefiniować samego szablonu takiego:
p First Name
b= firstName
p Last Name
b= lastName
które dla ciekawskich, dostaje skompilowany do tego:
function anonymous(locals) {
var buf = [];
var locals_ = locals || {}, firstName = locals_.firstName, lastName = locals_.lastName;
buf.push("<p>First Name <b>" + jade.escape(null == (jade.interp = firstName) ? "" : jade.interp) + "</b></p><p>Last Name <b>" + jade.escape(null == (jade.interp = lastName) ? "" : jade.interp) + "</b></p>");
return buf.join("");
}
To bardzo szybkie renderowanie po stronie serwera lub klienta.
Aby uzyskać wiązania danych do pracy, jednak będę musiał podwójnie opisywanie źródło:
p(data-bind='text: firstName') First Name
b= firstName
p(data-bind='text: lastName') Last Name
b= lastName
tj umieścić każdy zmienną zastępczy tam dwa razy, w dwóch różnych formatach.
(Na szczęście, większość z tych ram wziąć jakiś obiekt JSON dla widoku modelu (wierzę), które mogłyby służę bezpośrednio do Jade lub ramy, tak że część nie powinna być problemem.)
Bardzo chciałbym tego uniknąć, ale nie mogę myśleć o tym, jak to jest możliwe bez napisania własnego języka szablonowego, który jest silnie uzależniony od ramek frontendu.
Czy można to zrobić bez większego bólu? Korzystając z jednego z powyższych frontendów lub dowolnego języka szablonowego do kompilacji z JS? Być może za pośrednictwem niektórych wtyczek/rozszerzeń, zamiast zmieniać je na poziomie podstawowym?