HTML模板填充在服务器端和更新客户端 [英] HTML template filled in server-side and updated client-side

问题描述

我有动态内容的网页。比方说，这是一个产品页面。当用户将直接进入 example.com/product/123 我要呈现在服务器上我的产品模板，发送HTML浏览器。但是，当用户点击后链接到 /产品/ 555 我想使用JavaScript来更新客户端的模板。

I have a webpage with dynamic content. Let's say it's a product page. When the user goes directly to example.com/product/123 I want to render my product template on the server and send html to the browser. However, when the user later clicks a link to /product/555 I'd like to use JavaScript to update the template on the client-side.

我想使用类似Knockout.js或Angularjs，但我不知道怎样才能pre-填充这些模板与服务器上的一些初始数据，而且还有在客户端上运行模板。即如果我的角模板是这样的：

I'd like to use something like Knockout.js or Angularjs, but I don't see how I can pre-populate those templates with some initial data on the server and still have a functioning template on the client. i.e. If my Angular template is this:

<ul>
    <li ng-repeat="feature in features">
      {{feature.title}}
      <p>{{feature.description}}</p>
    </li>
</ul>

当用户将直接进入网址，我需要的东西仍然工作作为一个角模板，但与HTML当前产品填充。显然，这并不工作：​​

When the user goes directly to the URL, I need something that still works as an Angular template, but is filled in with the html for the current product. Obviously this doesn't work:

<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发送到浏览器以及一个单独的匹配模板...？

It seems like my only option is to send the server-rendered html to the browser along with a separate matching template...?

在这种情况下，我想避免编写每个模板的两倍。这意味着我需要或者切换到JavaScript来我的服务器的语言（这我也不会高兴）或选择编译为Java和JavaScript的模板语言，然后找到一种方法，它侵入播放框架（这是什么我目前使用）。

In that case, I'd like to avoid writing every template twice. Which means I need to either switch to JavaScript for my server language (which I would not be happy about) or choose a template language that compiles to both Java and JavaScript and then find a way to hack it into the Play Framework (which is what I'm currently using.)

有没有人有什么建议吗？

Does anyone have any advice?

推荐答案

如果你真的想有前角存储在一个区域的初始值activates-可以使用NG-bind属性，而非{{约束字符串} }，从你的例子：

If you would really like to have an initial value stored in an area before Angular activates- you can use the ng-bind attribute rather than {{bound strings}}, from your example:

<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激活它不会消灭与空值显示的信息。

I'm not sure where this would come in handy, but you'll also want to include the initial data-set as part of a script tag in the document, so that when angular DOES activate it doesn't wipe out the displayed information with nulls.

编辑：（正如所要求的评议）

(As requested by commenters)

另外，你可以把在列表顶部的NG-重复，有它配置基于功能名单本身填写。以下是NG-repeat元素，必须有与该设置NG-隐藏NG隐藏属性=功能，如果角负载，所有从原始服务器提供的列表中的元素隐藏自己无NG重复元素，角名单跳进存在。没有哈克修改角，并与直接NG-bind属性没有摆弄。

Alternatively, you could make an ng-repeat at the top of the list, have it configured to fill out based on the 'features' list itself. Following that ng-repeat element, have non-ng-repeat elements which have an ng-hide attribute with the setting ng-hide="features", if Angular loads, all the elements from the original server-provided list hide themselves, and the angular list jumps into existence. No hacky modifications to Angular, and no fiddling with the direct ng-bind attribute.

作为一个方面说明，你可能仍然要发送能够读取其数据的初始服务器元素角度同步之前它送入角一段脚本，如果你想避免闪烁，其中角清除数据，同时等待来自服务器相同的数据的请求。

As a side note, you might still want to send a piece of script capable of reading that initial server-element for its data to feed it into angular before angular synchronizes if you want to avoid a blink where angular clears the data while waiting for a request for the same data from the server.

这篇关于HTML模板填充在服务器端和更新客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！