javascript - 使用 Backbone 和 Backbone.Marionette 进行复杂路由

Question

我现在正在开发谷歌地图应用程序一段时间了。该应用程序正在使用 Backbone 和 Backbone.Marionette。您可以在此处找到其外观的屏幕截图: https://www.facebook.com/photo.php?fbid=566101353505241&set=a.516037321844978.1073741832.145077908940923&type=3&theater

在过去的几个小时里，我试图找到使用 Backbone Router 来保持应用程序状态的高级示例，但我找不到比使用单个路由参数的示例更高级的内容:#about #notes 等。 .

这就是我正在尝试做的事情。

当用户在 map 上移动时，我更改 url 以反射(reflect)这一点:/:lat/:lng/:缩放

当用户从右侧列表中选择任何标记时，我将 url 更改为:/:lat/:lng/:缩放/热点/:id

右侧的列表正在使用 Backbone.Paginator。因此，当用户单击任何页面时，网址将更改为:/:lat/:lng/:zoom/page/:id

现在，如果用户单击热点，我想将网址更改为:/:lat/:lng/:zoom/page/:id/hotspot/:id

例如，如果用户在应用程序中使用了路线功能，我希望网址能够反射(reflect)这一点:

/:lat/:lng/:缩放/方向/:开始/:结束

如果他在使用路线应用程序之前或之后使用热点列表，我想将网址更改为:/:lat/:lng/:缩放/方向/:开始/:结束/页面/:id/热点/:id

你明白了。我想让用户能够使用应用程序的任何部分，并随后与任何人共享链接。

正如我所说，我正在使用 Backbone.Marionette - 所以我的应用程序有很多子应用程序负责 map View 、 ListView 、方向 View 等。

我的问题如下:

1. 如何正确使用backbone.navigate？当用户在 map 上移动时 - 我可以轻松更改/:lat/:lng/:zoom 。但现在，如果用户单击任何热点，而我只需传递backbone.navigate('hotspot/200') -> url 将更改为 #hotspot/200，并且带有 lat/lng/zoom 的部分将丢失。我上面列出的任何其他网址也是如此。如果我只传递需要添加到 url 的部分，backbone 将清除整个哈希并添加我的新部分。你怎么处理那件事呢？您是否有一个全局函数来跟踪所有可能的 url 组合，并根据当前情况添加或替换？

2. 如果我们以这个网址为例:

   /:lat/:lng/:缩放/方向/:开始/:结束/页面/:id/热点/:id

   /:lat/:lng/:zoom - map 应用程序需要此部分Direction/:start/:end - 路线应用程序需要此部分

   page/:id - 热点应用需要这部分

   hotspot/:id - 热点应用程序需要此部分

您如何管理此类网址？我基本上需要一个接一个地调用上述应用程序才能重新创建应用程序状态。

有什么方法可以在不发疯的情况下完成这一切吗？欢迎任何高级 Backbone 路由器(甚至只是 HTML5 历史)使用或提示的示例!

Answer 1

我将创建一个 navigate(newState) 类型的函数来检查应用程序的当前状态(即 URL)。使用当前 URL，您可以根据所有条件生成下一个 URL，只需将新状态添加到当前状态或在适当的情况下替换当前状态的部分内容即可。完成后，使用您的新 URL 调用 Backbone.navigate。