связь между несколькими компонентами EmberJs

Question

Пожалуйста, посмотрите в этой http://emberjs.jsbin.com/ivOyiZa/1/edit

Эта панель аккордеона позволяет открывать несколько панелей. Я хочу, чтобы аккордеон открывал только одну панель за раз. Если открыта панель и пользователь нажимает на другую панель, открытая панель должна быть закрыта перед открытием новой панели. Как это сделать?

Благодаря

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