playframework - 服务端填充HTML模板，客户端更新

Question

我有一个包含动态内容的网页。假设它是一个产品页面。当用户直接进入example.com/product/123我想在服务器上呈现我的产品模板并将 html 发送到浏览器。但是，当用户稍后单击指向 /product/555 的链接时我想使用 JavaScript 来更新客户端的模板。

我想使用 Knockout.js 或 Angularjs 之类的东西，但我不知道如何在服务器上用一些初始数据预先填充这些模板，并且在客户端上仍然有一个正常运行的模板。即如果我的 Angular 模板是这样的:

<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 框架中(这就是我目前正在使用。)

有人有什么建议吗？

Answer 1

如果您真的希望在 Angular 激活之前将初始值存储在一个区域中 - 您可以使用 ng-bind 属性而不是 {{bound strings}}，从您的示例中:

<ul>
    <li ng-repeat="feature in features">
        <div ng-bind="feature.title">Hello</div>
        <p ng-bind="feature.description">This feature was rendered server-side but can be updated once angular activates</p>
    </li>
</ul>

我不确定这会派上用场，但您还需要将初始数据集作为脚本标记的一部分包含在文档中，以便在 angular DOES 激活时不会清除显示的信息与空值。

编辑: (根据评论者的要求)

或者，您可以在列表顶部创建一个 ng-repeat，将其配置为根据“功能”列表本身填写。在 ng-repeat 元素之后，有非 ng-repeat 元素，这些元素具有 ng-hide 属性，设置 ng-hide="features"，如果 Angular 加载，则原始服务器提供的列表中的所有元素都会隐藏自己，并且 Angular 列表跳入存在。没有对 Angular 的 hacky 修改，也没有摆弄直接的 ng-bind 属性。

作为旁注，如果您想避免 angular 在等待数据时清除数据的眨眼，您可能仍希望发送一段能够读取其数据的初始服务器元素的脚本，以便在 angular 同步之前将其输入到 angular 中。从服务器请求相同的数据。