针对浏览器的不同响应的Backbone.js路由器模式“;背面“;按钮或直接导航

Backbone.js router pattern for different response to browser "back" button or direct navigation

本文关键字：背面 按钮 导航 模式 路由器 浏览器 响应 js Backbone      更新时间：2023-11-10

有没有一个好的模式可以实现对这两个事件有不同响应的Backbone.js路由器：

  • 直接导航-用户通过调用Router.navigate()将url直接放入浏览器或应用程序，直接导航到页面
  • 浏览器"后退"按钮-用户按下"后退"键可转到以前所在的页面

我之所以这么问，是因为如果路由器是由于用户按下"返回"按钮而被调用的，我只想通过$('element_id').html(view.el)将旧视图放回其元素中，而无需将数据重新加载到模型中并重新渲染视图。

如果用户通过在浏览器中输入url、单击链接或从应用程序中调用router.navigation（）直接导航到页面，从而调用路由器，我希望路由器指示模型重新请求数据并触发视图的重新呈现。

任何帮助和建议都将不胜感激，非常感谢！

我不久前也遇到过类似的问题。这可能比你想要的要多，但以下是我发现的有效方法。

直接导航

对于直接导航，通常的流程是这样的：

  • 初始化应用程序：大多数backbone.js项目都会有一些初始化应用程序的代码（app.init）。虽然很多例子在实际的HTML中插入了集合的JSON（todos等），但我个人喜欢在页面加载后将此代码用作获取集合的机会，比如（coffeescript）:

    window.App =
  ...
  init: ->
    @todos = new App.Todos()
    @todos.deferred = @todos.fetch()
    @threads.deferred.done ->
      App.appRouter = new App.AppRouter(collection: self.todos)
      ...

    （使用jQuery的deferred是为了确保在实际呈现页面之前提取集合。）

  • 初始化路由器：在这里，您有机会将元素分配给路由器，并将集合分配给路由器（我使用的是来自thingbot骨干支持的"SwappingRouter"，我强烈建议您查看）：

    App.Router = Support.SwappingRouter.extend
...
  initialize: (options) ->
    @el = $('.content')
    @collection = options.collection

  • 执行路由处理程序：这是最后一步，此时集合已经初始化，路由器有一个指向它的指针，所以我们只需要创建视图并渲染它：

      show: (id) ->
    view = new App.TodosView(model: @collection.get(id))
    @swap(view)

    （Swap渲染视图并做一些其他事情来清理。）

浏览器后退按钮

在这种情况下，既不调用App.init也不调用AppRouter.initialize，因此默认情况下不会重新加载集合。主干将自动调用上一条路线上的导航，因此根据路线处理程序中的内容，视图可能会被重新渲染。在上面的例子中，它是（交换调用渲染），但您可以解决这个问题。

主干网的关键问题是，您同时使用无状态（HTTP）协议和有状态（富客户端应用程序）环境。把两个人排成一排，这样他们就能很好地配合在一起，这可能很棘手。

相关文章：