Ember中可靠的视图 [英] Dependable views in Ember

问题描述

我有一个应用程序列出相册。当单击 AlbumView 和 App.overlay （也是一个视图）的相册时。

App.overlay = Ember.View.create（{...}）（灯箱式叠加层）。

和：

  App.AlbumView = Ember.View.extend（{
 //关闭所选的相册视图，关闭叠加层
 close：function（）{
 App.overlay.close（）; 
} 
}）; 
  

这里是问题：我想要通过点击叠加层来关闭这两个视图，但是我希望覆盖层保持独立 c> AlbumView ，以便我可以在其他地方使用覆盖（即不引入两者之间的耦合） 。我如何做？

这是我目前的实现，紧耦合，我真的不喜欢：

  App.overlay = Ember.View.create（{
 //处理点击覆盖上的任何位置
点击：function（）{
这个close（）; 
}，
 
 //关闭叠加层（将selectedAlbum的控制器内容设为null隐藏AlbumView）
 close：function（）{
 App.selectedAlbumController.set（'content'，null）; //这不应该在这里
 this.remove（）; 
} 
}）; 
  

解决方案

我只是在学习，有一粒盐...

您可以向叠加层添加visible属性，然后从其他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'）
}）; 
  

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

解决方案

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

这篇关于Ember中可靠的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！