如何在 Ember JS 中单击浏览器 back/forward 按钮时隐藏 Bootstrap 模式

Question

我有一个 Ember 应用程序，其中包含本文中的模态对话框代码：http://ember.guru/2014/master-your-modals-in-ember-js

在浏览器中单击后退或前进按钮时，close/hide 的最佳方式是什么。

目前，叠加层和模态对话框将保持可见，而它们后面的内容将更改为 previous/next 页面。

这是一个 JSBin： http://emberjs.jsbin.com/rifesaroqe

application.hbs:

{{outlet}}
{{outlet 'modal'}}

routes/application.js:

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    showModal: function(name, model) {
      this.render(name, {
        into: 'application',
        outlet: 'modal',
        model: model
      });
    },
    removeModal: function() {
      this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
});

components/my-modal.js:

App.MyModalComponent = Ember.Component.extend({
  actions: {
    ok: function() {
      this.$('.modal').modal('hide');
      this.sendAction('ok');
    }
  },
  show: function() {
    this.$('.modal').modal().on('hidden.bs.modal', function() {
      this.sendAction('close');
    }.bind(this));
  }.on('didInsertElement')
});

Answer 1

已更新 JSBin - http://emberjs.jsbin.com/hiqame/2

对于您的特定示例，最好的方法是使用路线 (link to docs). In Ember, whenever an active route transitions successfully into another route, that active route fires the didTransition action. You can then use the send method (link to docs) 上的 didTransition 事件来触发 removeModal 操作，这将关闭模态.

如何在 Ember JS 中单击浏览器 back/forward 按钮时隐藏 Bootstrap 模式

How to hide Bootstrap modal when browser back/forward button is clicked in Ember JS

modal-dialog

twitter-bootstrap

ember.js