多个EmberJs组件之间的通信

时间:2014-07-14 13:32:31

标签: ember.js

请查看此http://emberjs.jsbin.com/ivOyiZa/1/edit

此面板手风琴允许打开多个面板。我想要一支一次只打开一个面板的手风琴。如果打开了一个面板并且用户单击另一个面板,则必须先关闭打开的面板,然后再打开新面板。怎么做?

由于

1 个答案:

答案 0 :(得分:1)

Here is the working demo.

我已将当前打开的emberAccordionItemView添加到EmberAccordionComponent。我还在emberAccordionItemView添加了一个观察者,以自动关闭不是openedItemView的所有内容。

App.EmberAccordionComponent = Ember.Component.extend({
  openedItemView: null,
  emberAccordionItemView: Ember.View.extend({    
    expanded: false,
    autoClose: function() {
      if(this.get('parentView.openedItemView') !== this) {
        this.set('expanded', false);   
      }
    }.observes('parentView.openedItemView')
  })
  ....

EmberAccordionHeaderComponent中的点击事件现在将openedItemView设置为EmberAccordionComponent

App.EmberAccordionHeaderComponent = Ember.Component.extend({  
  classNames: ['ember-accordion-header'],  
  click: function() {
    this.set('parentView.parentView.openedItemView', this.get('parentView'));

    // here we toggle the emberAccordionItemView.expanded property
    this.toggleProperty('parentView.expanded');  
  }
});