Question

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

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

添加额外的hashchange侦听器并尝试阻止传播不起作用;两位听众都被处决了。
在打开对话框时添加对router.navigate（“modal”）的调用会在历史堆栈中添加一个额外的条目，这意味着返回工作正常，但它会导致原始页面路由/重新再渲染而不仅仅是关闭模态。

感谢帮助！

Answer 1

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

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

类似的变量也可以专门用于模态视图，它总是先在路线上关闭。

// 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
}

Backbone.js路由器：隐藏在页面模态中，而不是在按下后退时返回

1 个答案: