I have a webpage with dynamic content. Let's say it's a product page. When the user goes directly to example.com/product/123 I want to render my product template on the server and send html to the browser. However, when the user later clicks a link to /product/555 I'd like to use JavaScript to update the template on the client-side.
I'd like to use something like Knockout.js or Angularjs, but I don't see how I can pre-populate those templates with some initial data on the server and still have a functioning template on the client. i.e. If my Angular template is this:
<ul>
<li ng-repeat="feature in features">
{{feature.title}}
<p>{{feature.description}}</p>
</li>
</ul>
When the user goes directly to the URL, I need something that still works as an Angular template, but is filled in with the html for the current product. Obviously this doesn't work:
<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>
It seems like my only option is to send the server-rendered html to the browser along with a separate matching template...?
In that case, I'd like to avoid writing every template twice. Which means I need to either switch to JavaScript for my server language (which I would not be happy about) or choose a template language that compiles to both Java and JavaScript and then find a way to hack it into the Play Framework (which is what I'm currently using.)
Does anyone have any advice?