javascript - Backbone.js 路由器 : hide in page modal instead of going back when back is pushed

Question

我有一个基于 backbone.js 路由器的应用程序，它使用默认的 hashchange 处理程序在页面之间移动。在一个页面上有一个触发模态框的按钮，如果用户按下返回，我想关闭它，而不是将用户返回历史页面。

我尝试了几种不同的方法，但我对使用 hashchange/popstate 还很陌生，所以希望得到指导。

• 添加一个额外的 hashchange 监听器并试图阻止传播没有奏效；两个听众都被处决了。

• 在打开对话框时添加对 router.navigate("modal") 的调用会向历史堆栈添加一个额外的条目，这意味着返回可以正常工作，但它会导致原始页面路由/重新-再次渲染，而不仅仅是关闭模式。

感谢您的帮助!

Answer 1

听起来你的问题不一定是如何隐藏模式，而是如何防止渲染/未更改的 View 在路由到时重新渲染。

解决此问题的一种方法是维护“currentView”并在路由处理程序中，针对该 View 进行测试以查看是否需要为该路由完成工作。

也可以专门为模态视图保留一个类似的变量，它总是首先在路由上关闭。

// In some scope accessible to the router
var currentView, modalView; // or app.currentView, etc.

// extend your router's `navigate` to always close the modal
navigate: function (fragment, options) {
  modalView && modalView.close(); // or however you close your modal
  Backbone.history.navigate(fragment, options);
  return this;
}

// in your modal route(s)
//
// Disclaimer here: if your modal windows are part of the history,
// their routes should probably also indicate what should be
// rendered *under* the modal, e.g. `/someroute/modal`, etc.
// Otherwise, what happens if a browser steps "back" into a modal
// route via history, or a direct link?  You probably want something
// to render under the modal.
modal: function () {
  modalView = new ModalView(); // or change the modal's content, etc

  // given the above point, you may want to render the view under this
  // modal here:
  this.index(); // for example

  // then continue to show your modal
},

// then in your other routes, for example `index`:
index: function () {
  // test somehow to make sure that the view needs to be rendered
  if (currentView instanceof IndexView) return;

  currentView = new IndexView();
  // continue to render/show the currentView
}