Question

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

在浏览器中单击后退或前进按钮时，关闭/隐藏它的最佳方法是什么。

目前，叠加层和模态对话框仍然可见，而其后面的内容将更改为上一页/下一页。

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

application.hbs：

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

路由/ 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'
      });
    }
  }
});

组件/我的-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)上使用didTransition事件。在Ember中，只要活动路由成功转换到另一个路由，该活动路由就会触发didTransition操作。然后，您可以使用路线中的send方法（link to docs）触发removeModal操作，这将关闭模式。

如何在Ember JS中单击浏览器后退/前进按钮时隐藏Bootstrap模式

1 个答案: