2

是否有一个很好的模式来实现对这两个事件做出不同响应的 Backbone.js 路由器：

  • 直接导航- 用户通过将 url 直接放入浏览器或通过调用应用程序直接导航到页面Router.navigate()
  • 浏览器“返回”按钮- 用户按下“返回”按钮可以转到他们之前所在的页面。

我问的原因是因为如果由于用户按下“后退”按钮而调用路由器，我只想将旧视图放回其元素中，$('element_id').html(view.el)而无需将数据重新加载到模型中并重新渲染风景。

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

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

4

1 回答 1

2

不久前我遇到了类似的问题。这可能比您想要的要多，但这是我发现的作品。

直接导航

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

  • 初始化应用程序：大多数backbone.js 项目都会有一些初始化应用程序的代码（App.init）。虽然很多示例在实际 HTML 中插入集合（待办事项等）的 JSON，但我个人喜欢使用此代码作为在页面加载后获取集合的机会，如下所示（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 是为了确保在实际渲染页面之前获取集合。）

  • 初始化路由器：在这里您有机会为路由器分配一个元素并将集合分配给路由器（我正在使用 thinkbot 的骨干支持中的“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，因此默认情况下不会重新加载集合。Backbone 将自动调用上一条路由的导航，因此根据您的路由处理程序中的内容，视图可能会重新呈现。在上面的示例中，它将是（交换调用渲染），但您可以解决此问题。

这里和主干始终存在的关键问题是，您同时使用无状态 (HTTP) 协议和有状态（富客户端应用程序）环境。将两者对齐以使它们很好地协同工作可能非常棘手。

于 2012-07-19T05:03:36.827 回答