在服务器和客户端上呈现Backbone.js应用程序

Question

6

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

当第一次请求路由时，出于性能原因，服务器应该进行渲染。之后，所有后续操作都应该导致客户端渲染。

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

我该如何完成这个任务？

目前，我已经看了AirBnb的rendr项目，但这肯定会将我与Backbone.js联系起来（我不确定我是否想一直坚持使用Backbone.js），而且似乎还没有完全完成。至少，AirBnb尚未推荐它用于生产环境。

还有其他关于如何完成此任务的想法吗？

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

有任何提示吗？

- Golo Roden

1

除了子问题之外，这可能是 https://dev59.com/f2ox5IYBdhLWcg3wtmc1?rq=1 的重复。您会在那里找到一些关于JS模板语言的好讨论。别忘了模板引擎选择器！http://garann.github.io/template-chooser/ - Noah C

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter Lyons · Accepted Answer

我正在开发一个应用程序，它可以实现这个功能。如果您不想使用rendr，那么您需要编写自己版本的一些重要部分。据我所知，目前您的选择是使用rendr或者自行开发。以下是一些杂项提示。

我们在服务器端使用cheerio进行DOM操作，因此当视图在服务器上呈现时，this.$el是一个cheerio元素实例。在浏览器中，它是jQuery。
您不需要在服务器端进行事件委派和绑定。我们的代码当前技术上也在这样做，但这是没有意义的，一个更清晰的解决方案会避免在服务器上进行该操作。
一旦您在浏览器中拥有了经过服务器渲染的HTML，您需要一种方法将一组大型嵌套的视图实例与它们在大型嵌套的DOM树中对应的元素进行连接。我们有一个自己开发的解决方案，但是Backbone.View.setElement是核心，您需要编写一些代码来实现这一点。
目前我们仍然在浏览器中重新渲染，尽管可能有一种更好的方法可以将视图实例给予一些选项（包括预先呈现的DOM节点）在构造函数中，并在不重新渲染的情况下正确地进行连接。然而，这是读者需要自己完成的练习。:-)
我们还通过<script>标签发送我们需要的原始数据作为JSON，因此我们既有服务器渲染的HTML（用于感知性能），也有可用的原始数据作为JSON，以便我们可以实例化和操作我们的backbone模型和视图。同样，您需要编写一些代码来管理这种情况。
我们使用browserify在服务器端和浏览器端进行捆绑和共享代码。我们所有的JavaScript都被编码为CommonJS模块。

总之，不管怎样，在使用这种方式工作了很多个月后，我认为backbone不太适合这种范例。backbone的许多核心概念都是可行的，但它不能很好地将视图实例映射到预渲染的DOM节点。从JSON引导模型和集合更容易，但视图层可能需要进行重大改进以在这种风格下有效地操作。