使用Backbone& amp; Backbone.Marionette

时间:2014-06-18 14:57:20

标签: javascript backbone.js url-routing marionette html5-history

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

在过去的几个小时里,我一直试图找到使用Backbone路由器保持应用状态的高级示例,但我找不到比单路由参数更高级的示例:#about#笔记等...

这是我想要做的事情。

当用户在地图上移动时,我会更改网址以反映这一点: /:纬度/:LNG /:变焦

当用户从右侧列表中选择任何标记时,我将网址更改为: /:纬度/:LNG /:缩放/热点/:ID

右边的列表使用Backbone.Paginator。因此,当用户点击任何页面时,网址将更改为: /:纬度/:LNG /:缩放/页/:ID

现在,如果用户点击热点,我想将网址更改为: /:纬度/:LNG /:缩放/页/:ID /热点/:ID

例如,如果用户使用了应用中的路线功能,我希望网址反映这一点:

/:纬度/:LNG /:缩放/方向/:启动/:端

如果他在使用路线应用之前或之后使用热点列表,我想将网址更改为: /:纬度/:LNG /:缩放/方向/:启动/:端/页/:ID /热点/:ID

你明白了。我想让用户可以使用应用程序的任何部分并在此之后与任何人共享链接。

正如我所说,我使用Backbone.Marionette - 所以我的应用程序有很多子应用程序负责地图视图,列表视图,方向视图等。

我的问题如下:

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

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

    /:纬度/:LNG /:缩放/方向/:启动/:端/页/:ID /热点/:ID

    /:lat /:lng /:zoom - 地图应用需要此部分 方向/:开始/:结束 - 路线应用

    需要此部分

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

    hotspot /:id - 热点应用

  3. 需要此部分

    你如何管理这些网址?我基本上需要一个接一个地调用上面的应用程序,以重新创建应用程序状态。

    有没有办法在不生气的情况下做到这一切?欢迎使用高级骨干路由器(甚至只是HTML5历史记录)用法或提示的任何示例!

1 个答案:

答案 0 :(得分:1)

我创建了一个navigate(newState)类型函数,用于检查应用程序的当前状态(即URL)。使用当前URL,您可以根据所有条件生成下一个URL,只需将新状态添加到当前状态或在适当时替换当前状态的部分。完成后,使用新网址致电Backbone.navigate