6

假设我有一个使用 Backbone.js 和 Handlebars 构建的 Web 应用程序。作为服务器，我使用的是 Node.js。现在我想在两端进行渲染，即在服务器和客户端上。

当第一次请求路由时，服务器会进行渲染（主要是由于性能原因）。之后，所有后续操作都将导致客户端呈现。

这意味着我必须能够以完全相同的方式在客户端和服务器上呈现任何页面。两端必须支持同一种路由。

我怎么能完成这个任务？

目前，我已经查看了 AirBnb 的rendr项目，但这绝对将我与 Backbone.js 联系在一起（我不确定我是否想一直坚持使用 Backbone.js），而且似乎还没有完美完成然而。至少，AirBnb 还不建议将其用于生产用途。

关于如何做到这一点的任何其他想法？

作为一个子问题，我可能还会问：在服务器和客户端之间共享 JavaScript 代码的首选方式是什么？为此，我也知道pile，但我可以想象可能有更好的解决方案可用。

有什么提示吗？

4

1 回答 1

11

好吧，我正在构建一个执行此操作的应用程序。如果您不想使用rendr，您将不得不编写自己的版本来处理他们负责的一些事情。AFAIK 目前您的选择是 rendr 或本土的。这里有一些杂项提示。

  • 我们使用cheerio进行服务器端的DOM 操作，所以当视图在服务器上渲染时，this.$el是一个cheerio 元素实例。在浏览器中，它是 jQuery。
  • 您不需要在服务器端进行事件委托和绑定。我们的代码目前在技术上是这样做的，但它是没有意义的，一个更干净的解决方案可以避免它在服务器上
  • 在浏览器中拥有服务器渲染的 HTML 后，您需要一种方法将视图实例的大型嵌套树连接到它们在大型嵌套 DOM 树中的相应元素。我们对此有一个本土解决方案，但Backbone.View.setElement它是核心，您需要编写一些代码来实现这一点
  • 我们目前正在浏览器上重新渲染，尽管可能有一种更巧妙的方式来获取视图实例，在构造函数中为其提供一些选项，包括预渲染的 DOM 节点，并在不重新渲染的情况下正确连接。不过，这对读者来说是一个练习。:-)
  • 我们还将我们需要的原始数据作为 JSON 发送到<script>标签中，这样我们就有服务器渲染的 HTML（用于感知性能）和可用的原始数据作为 JSON，这样我们就可以实例化和操作我们的主干模型和视图。同样，您必须想出一些代码来管理这种情况。
  • 我们使用browserify在服务器和浏览器之间捆绑和共享代码。我们所有的 JavaScript 都被编码为 CommonJS 模块。
  • 我们的视图父类中有一个基本isBrowser()函数，因此我们知道何时应该为事件绑定等运行仅浏览器的代码。

无论如何，无论如何，在以这种方式工作了好几个月之后，我认为骨干不适用于这种范式。许多来自主干的核心概念都很好，但它不适合将视图实例映射到预渲染的 DOM 节点。从 JSON 引导模型和集合更容易，但视图层可能需要一个重要的分支才能以这种风格干净地运行。

于 2013-07-31T18:42:31.233 回答