如何以某种方式将 Backbone.js 用于单页网站答案

【问题标题】：How to use Backbone.js for single page websites in a certain way如何以某种方式将 Backbone.js 用于单页网站
【发布时间】：2014-02-17 04:52:47
【问题描述】：

基本上，我想创建一个功能类似这样的个人网站：

https://sublime.wbond.net/packages/Jade

它包含在一个 HTML 页面中，单击导航项只会加载所需的信息。

查看 javascript 代码，我相信开发人员正在使用 Backbone.js 和 Handlebars.js。我认为他们使用 PHP 作为后端。

我所追求的一个关键功能是在这个网站中。本质上，当您在上述目录中，然后更改为https://sublime.wbond.net/docs 时，将仅对所需的 HTML 进行 AJAX 请求，然后将其附加到当前页面。

按照教程编写了一个简单的主干应用程序，似乎它的完成方式有所不同。使用节点托管应用程序，它将加载所有内容。当您转到另一个目录时，它仍会加载所有内容，然后骨干网将根据 URL 附加正确的部分。我可以看到这对某些类型的应用程序很有用，但我不想要那个功能。我对其进行了更多研究，并考虑在主干中使用 fetch() 功能，但我也不太确定他是否正在使用它。

看起来他正在做类似 Airbnb 的 Rendr 之类的事情。我不能真正使用它，因为那里的文档现在还不够。

看起来当你调用一个页面时，它只是为你提供了所有准备好的 HTML，而不需要在本地编译它。在利用主干方面我在这里缺少什么，或者这只是他用来处理这个问题的一些工具？

【问题讨论】：

骨干路由器让您做到这一点。不过，您需要告诉它使用 pushState。 backbonejs.org/#Router

标签： javascript jquery html node.js backbone.js

【解决方案1】：

如果您不害怕在视频前花费数小时，excellent screencasts 可以帮助您入门：该人解释了如何使用 Backbone 和 Marionette 从头开始构建单页应用程序。

【讨论】：

【解决方案2】：

这个网站没有使用Backbone，他使用的解决方案是完整的html页面加载和JSon调用的混合，看看这个链接：

https://sublime.wbond.net/browse.json

https://sublime.wbond.net/search.json

https://sublime.wbond.net/docs.html

https://sublime.wbond.net/news.html

https://sublime.wbond.net/stats.json

【讨论】：

是的，我在查看网站时观察到了这一点。但是，如果您查看 app.js，您会看到对 Backbone 和 Handlebars 的引用，这就是我认为他使用它们的原因，即使它没有明确显示包含它们。

【解决方案3】：

与 wbond.net 具有相同行为的最简单方法是更改在后端呈现页面的方式。您需要检查请求是否为 XHR 并仅呈现内容，而不呈现布局。在前端，您需要将点击事件绑定到每个链接，这些链接将在绑定的 URL 上发送 AJAX 请求，并将整个响应放在页面内容区域（jQuery 的 $.get() 方法）。

【讨论】：

是的，我想我必须检查一下 XHR 是否会在节点内发送不同的代码，这很容易。