Eu tenho uma página da Web com conteúdo dinâmico. Vamos dizer que é uma página de produto. Quando o usuário vai diretamente paraexample.com/product/123 Eu quero renderizar meu modelo de produto no servidor e enviar html para o navegador. No entanto, quando o usuário clica mais tarde em um link para/product/555 Eu gostaria de usar o JavaScript para atualizar o modelo no lado do cliente.

Eu gostaria de usar algo como Knockout.js ou Angularjs, mas não vejo como posso preencher previamente esses modelos com alguns dados iniciais no servidor e ainda ter um modelo em funcionamento no cliente. ou seja, se meu modelo angular é este:

<ul>
    <li ng-repeat="feature in features">
      {{feature.title}}
      <p>{{feature.description}}</p>
    </li>
</ul>

Quando o usuário acessa diretamente o URL, preciso de algo que ainda funcione como um modelo angular, mas que seja preenchido com o html do produto atual. Obviamente, isso não funciona:

<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>

Parece que minha única opção é enviar o HTML renderizado pelo servidor para o navegador junto com um modelo correspondente separado ...?

Nesse caso, gostaria de evitar escrever cada modelo duas vezes. O que significa que eu preciso mudar para JavaScript para o meu idioma de servidor (o qual eu não ficaria feliz) ou escolher uma linguagem de template que compila para Java e JavaScript e então encontrar uma maneira de hackeá-lo no Play Framework (que é o que Eu estou usando atualmente.

Alguém tem algum conselho?