playframework – 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中(这是什么我正在使用.)

有人有任何建议吗？

解决方法

如果您真的希望在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>

我不知道这会派上用场,但是您也希望在文档中包含初始数据集作为脚本标签的一部分,以便在角度激活时,它不会消除显示的信息带空值.

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

或者,您可以在列表顶部进行重复,将其配置为根据“功能”列表本身填写.在ng-repeat元素之后,具有ng-hide =“features”的ng-hide属性的非ng重复元素,如果Angular加载,则原始服务器提供的列表中的所有元素都隐藏自身,以及角度列表跳入现实.对Angular没有任何修改,并且没有直接的ng-bind属性.

作为一个附注,您可能仍然希望发送一个脚本,能够读取该初始服务器元素,以使其数据在角度同步之前将其提供给角度,如果您想避免在等待数据时角度清除数据的闪烁从服务器请求相同的数据.