HTML-шаблон заполнен на стороне сервера и обновлен на стороне клиента
У меня есть веб-страница с динамическим контентом. Давайте скажем, что это страница продукта. Когда пользователь идет прямо кexample.com/product/123
Я хочу отобразить шаблон моего продукта на сервере и отправить HTML в браузер. Тем не менее, когда пользователь позже нажимает ссылку на/product/555
Я хотел бы использовать JavaScript для обновления шаблона на стороне клиента.
Я хотел бы использовать что-то вроде Knockout.js или Angularjs, но я не вижу, как я могу предварительно заполнить эти шаблоны некоторыми начальными данными на сервере и при этом иметь работающий шаблон на клиенте. т.е. если мой угловой шаблон это:
<ul>
<li ng-repeat="feature in features">
{{feature.title}}
<p>{{feature.description}}</p>
</li>
</ul>
Когда пользователь переходит непосредственно к URL, мне нужно что-то, что все еще работает как шаблон Angular, но заполняется html для текущего продукта. Очевидно, что это не работает:
<ul>
<li ng-repeat="feature in features">Hello
<p>This feature was rendered server-side</p>
</li>
<li>Asdf <p>These are stuck here now since angular won't replace them when
it updates.... </p></li>
</ul>
Похоже, что мой единственный вариант - отправить HTML-код сервера в браузер вместе с отдельным соответствующим шаблоном ...?
В этом случае я бы хотел избежать написания каждого шаблона дважды. Это означает, что мне нужно либо переключиться на JavaScript для моего серверного языка (что меня не устраивает), либо выбрать язык шаблонов, который компилируется как в Java, так и в JavaScript, а затем найти способ взломать его в Play Framework (что Я сейчас пользуюсь.)
У кого-нибудь есть совет?