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>

我不确定这在哪里有用，但是您还希望将初始数据集作为脚本标签的一部分包含在文档中，以便在激活角DOES时不会擦除显示的信息带空值。

编辑：（ 按评论者的要求）

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

附带说明一下，您可能仍想发送一段脚本，该脚本能够读取该初始服务器元素以供其数据在角度同步之前将其输入角度，如果您要避免眨眼，等待角度的同时角度会清除数据向服务器请求相同的数据。