Ember 中可靠的视图

我有一个列出专辑的应用程序。当同时点击专辑时AlbumView and App.overlay（也是一个视图）被显示。

App.overlay = Ember.View.create({...})（类似灯箱的叠加）。

and:

App.AlbumView = Ember.View.extend({
  // close the selected album view by closing the overlay
  close: function() {
    App.overlay.close();
  }
});

问题是：我希望能够通过单击叠加层来关闭这两个视图，但我希望保留叠加层独立的 of AlbumView，这样我就可以在其他地方使用覆盖层（即不引入两者之间的耦合）。我该怎么做？

这是我当前的实现，具有紧密耦合，我真的不喜欢：

App.overlay = Ember.View.create({
  // handle clicking anywhere on the overlay
  click: function() {
    this.close();
  },

  // close the overlay (setting selectedAlbum's controller content to null hides the AlbumView)
  close: function() {
    App.selectedAlbumController.set('content', null); // this should not be here
    this.remove();
  }
});

我才刚刚学习 ember，所以对此持保留态度......

您可以向叠加层添加“可见”属性，然后从其他 AlbumView 中观察它。像这样：

var overlay = Ember.View.create({
  visible: true,
  click: function() {
    this.close();
  },
  close: function() {
    this.set('visible', false);
    this.remove();
  }
});

App.AlbumView = Ember.View.extend({
  overlayClosed: function() {
    App.selectedAlbumController.set('content', null);
    this.remove();
  }.observes('overlay.visible')
});