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

如果你真的想有前角存储在一个区域的初始值activates-可以使用NG绑定属性,而不是{{势必串}},从你的例子:

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

我不确定这会派上用场,但你也想把初始数据集作为文档中脚本标签的一部分包含在内,这样当角度DOES激活时它不会消除所显示的信息.与空值.

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

或者,您可以在列表顶部进行ng-repeat,将其配置为根据"功能"列表本身进行填写.在ng-repeat元素之后,使用ng-hide ="features"设置具有ng-hide属性的非ng-repeat元素,如果Angular加载,原始服务器提供的列表中的所有元素都隐藏自己,并且角度列表跳跃存在.对Angular没有任何hacky修改,也没有摆弄直接ng-bind属性.

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