服务端填写 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-hide="features" 的 ng-hide 属性的非 ng-repeat 元素，如果加载了 Angular，则原始服务器提供的列表中的所有元素都会隐藏自己，并且角度列表开始存在。没有对 Angular 进行任何修改，也没有摆弄直接 ng-bind 属性。

作为旁注，如果您想避免 Angular 清除数据时出现闪烁，您可能仍希望发送一段脚本，该脚本能够读取该初始服务器元素的数据以在 Angular 同步之前将其输入 Angular等待来自服务器的相同数据的请求。

Answer 2

我只使用了 Knockout，而不是 Angular，但我使用的一种看似非常常见的方法是将数据的初始状态作为 JSON 呈现到页面标记中，并在 DOM 上准备好使用它来构建您的初始 Javascript查看模型，然后应用 Knockout 绑定来构建 UI。因此，即使对于已经存在于服务器上的产品（例如您的产品），UI 也会构建客户端。这意味着可以在初始 UI 创建和添加客户端时调用相同的模板，例如具有自己的视图模型和模板的子产品。这是您的选择吗？

编辑：如果我误解了您的要求，我正在谈论的方法在这个问题中更详细：KnockoutJS duplicating data overhead

Answer 3

AngularJS 中的一个选项可能是使用指令将服务器上呈现的值复制到模型中，并让后续操作通过 JavaScript 检索数据。

我在 ASP.NET WebForms 应用程序中使用了here 中描述的方法，在第一次请求时通过来自服务器的隐藏值预填充我的模型。根据讨论，这与 Angular 方式不同，但这是可能的。

以下是 html 示例：

<input type="hidden" ng-model="modelToCopyTo" copy-to-model value='"this was set server side"' />

JavaScript：

var directiveModule = angular.module('customDirectives', []);

directiveModule.directive('copyToModel', function ($parse) {
    return function (scope, element, attrs) {
        $parse(attrs.ngModel).assign(scope, JSON.parse(attrs.value));
    }
});