更新服务器端渲染客户端答案

【问题标题】：Updating server-side rendering client-side更新服务器端渲染客户端
【发布时间】：2012-01-17 14:37:05
【问题描述】：

我有一个服务器端模板引擎 Jade，我用它来呈现布局。当客户端第一次收到布局时，后续可能需要更新的布局的内容会有很小的变化，而不是布局本身。

有没有办法通过仅更改需要更新的内容并同时使用 Jade 的强大功能来“重新渲染”客户端。

【问题讨论】：

标签： templates node.js express pug

【解决方案1】：

你可以通过socket.io来做，我目前正在用node.js开发程序来做这件事，并有一个工作原型-https://github.com/parj/tableUpdates/tree/tableUpdate

视图是使用jade在服务器端呈现的。需要更改的组件，我从服务器端发送一个 json，在客户端对其进行解析，然后仅使用 JavaScript 更新所需的组件。

在 server.js 中，您可以看到我放在一起然后发出的可变货币的 json。在客户端，它在 public/javascript/buildtable.js 中接收和处理

我已经上传了最新的代码 - server.js 每秒运行一次 randomChanges() 并向客户端发送随机 JSON 数据。客户端收到后重建表。希望这是您正在寻找的。p>

【讨论】：

【解决方案2】：

在客户端使用 Jade 有一些解决方法。您或许可以利用这两个模块：

这允许您在客户端执行类似的操作：

var $ = require('jquery');
var jadeify = require('jadeify');

var msg = jadeify('msg.jade', {
  title : 'foo',
  body : 'bar baz quux'
}).appendTo($('#messages'));

【讨论】：

【解决方案3】：

我有 node.js、c#、PHP 和 Python 团队的员工，所以我必须记住很多次通用的解决方案，所以我尝试这样思考，而不是对 node.js 本身如此具体。如果你不喜欢这个，请记住这一点。

您可以通过使用 JavaScript 分离数据和 UI 来结束。在你的页面上列出脚本源并给它一个随机的查询字符串值，但它实际上是在获取你的数据的服务器端代码。

<script src="/mypagedata?ran=[put random here to avoid caching]"></script>
<script src="/displaypagedata.js"></script>

让脚本源内部有一个值，例如：

window.pageData = { [whatever] };

然后让“/displaypagedata.js”替换页面上的数值。这样，您可以保持视图静态。您还可以编写“/displaypagedata.js”代码以在窗口加载到相同的“/mypagedata”后使用长轮询，方法是不断请求加载脚本文件。我建议使用 jQuery.getScript，因为它有一个事件处理程序来知道何时尝试另一个加载。

【讨论】：