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 (что Я сейчас пользуюсь.)

У кого-нибудь есть совет?

Ответы на вопрос(4)

Ваш ответ на вопрос