渲染服务器和客户端上的Backbone.js应用程序

Question

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

当请求路线的第一次，服务器应做渲染（主要由于性能原因）。之后，以下所有操作都将导致客户端呈现。

这意味着，我必须能够使客户端和服务器上的任何页面，两次在完全同样的方式。两端必须支持相同的路线。

我怎么能完成这项任务？目前，我已经看过AirBnb的rendr项目，但是这肯定会把我和Backbone.js联系起来（我不确定是否我想一直坚持使用Backbone.js），并且似乎尚未完美完成。至少AirBnb不推荐将其用于生产用途。

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

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

任何提示？

Answer 1

那么，我正在构建一个这样的应用程序。如果你不想使用rendr，你将不得不为自己编写的一些他们所关心的东西编写代码。 AFAIK在您的选择是Rendr或本土的时刻。这里有一些其他的小技巧。

• 我们使用cheerio服务器端的DOM操作，所以当欣赏到服务器上渲染，this.$el是cheerio元素实例。在浏览器中，它是jQuery。
• 您不需要在服务器端进行事件委托和绑定。我们的代码在技术上做到这一点的时刻，但它是没有意义的，更清洁的解决方案将避免在服务器上
• 一旦你在浏览器中的服务器渲染HTML，你需要一种方法来线了视图实例的大嵌套树到大嵌套DOM树中的相应元素。我们对此有一个土生土长的解决方案，但Backbone.View.setElement是核心，你需要编写一些代码来实现这一目标
• 我们在浏览器重新呈现在目前虽然有可能采取一个巧妙方式一个视图实例，在构造函数中给它一些选项，包括预渲染的DOM节点，并且在不重新渲染的情况下正确连接东西。尽管如此，这是一个练习。 :-)
• 我们也发下来，所以我们有两个服务器渲染HTML（用于感知性能），我们需要为JSON一个<script>标签内的原始数据和原始数据可作为JSON，所以我们可以得到我们的骨干模型和视图实例化和可操作性。再次，你将不得不拿出一些代码来处理这种情况。
• 我们使用browserify在服务器和浏览器之间捆绑和共享代码。我们所有的JavaScript都被编码为CommonJS模块。
• 我们在我们的视图父类中有一个基本的isBrowser()函数，所以我们知道何时只有浏览器的代码才能运行事件绑定等。

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