Dependable views in Ember

问题

I have an app which lists albums. When album is clicked on both AlbumView and App.overlay (also a view) are displayed.

App.overlay = Ember.View.create({...}) (Lightbox-like overlay).

and:

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

And here's the problem: I want to be able to close those both views by clicking on the overlay, but I want overlay to remain independent of AlbumView, so that I can use the overlay in other places (i.e. without introducing a coupling between the two). How can I do it?

Here is my current implementation, with tight coupling, which I really don't like:

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();
  }
});

回答1:

I'm only just learning ember, so take this with a grain of salt...

You could add a 'visible' property to the overlay, and then observe it from the other AlbumView. Like this:

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

回答2:

What about extracting your close method in a mixin?

App.AlbumClosing = Ember.Mixin.create({
    close: function() {
        App.selectedAlbumController.set('content', null);
        this.remove();
    }
});

var overlay = Ember.View.create(App.AlbumClosing, {
    click: function() {
        this.close();
    }
});

来源：https://stackoverflow.com/questions/9784973/dependable-views-in-ember

标签

ember.js