Ich habe eine Webseite mit dynamischem Inhalt. Angenommen, es ist eine Produktseite. Wenn der Benutzer direkt zu gehtexample.com/product/123 Ich möchte meine Produktvorlage auf dem Server rendern und HTML-Code an den Browser senden. Wenn der Benutzer jedoch später auf einen Link zu klickt/product/555 Ich möchte JavaScript verwenden, um die Vorlage auf der Clientseite zu aktualisieren.

Ich würde gerne etwas wie Knockout.js oder Angularjs verwenden, aber ich verstehe nicht, wie ich diese Vorlagen mit anfänglichen Daten auf dem Server vorbelegen kann und immer noch eine funktionierende Vorlage auf dem Client habe. Wenn meine Angular-Vorlage wie folgt lautet:

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

Wenn der Benutzer direkt auf die URL zugreift, benötige ich etwas, das weiterhin als Angular-Vorlage fungiert, jedoch mit dem HTML-Code für das aktuelle Produkt ausgefüllt ist. Offensichtlich funktioniert das nicht:

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

Es scheint, als ob meine einzige Option darin besteht, das vom Server gerenderte HTML zusammen mit einer separaten passenden Vorlage an den Browser zu senden ...?

In diesem Fall möchte ich vermeiden, jede Vorlage zweimal zu schreiben. Das bedeutet, dass ich entweder für meine Serversprache auf JavaScript umsteigen muss (worüber ich mich nicht freuen würde) oder eine Vorlagensprache auswählen muss, die sowohl mit Java als auch mit JavaScript kompatibel ist, und dann einen Weg finden muss, sie in das Play Framework zu hacken (was auch immer der Fall ist) Ich benutze gerade.)

Hat jemand einen Rat?