구성 요소가있는 Ember 탭

Question

부트 스트랩 스타일 탭을 처리하기 위해 Ember.Component을 쓰려고합니다. 다시 사용할 수있는 TabHolderComponent으로 구현했습니다.이 배열은 매개 변수로 배열을 취하고 항목 당 하나의 탭을 출력 한 다음 항목 당 하나의 내용 컨테이너 (부트 스트랩)를 출력합니다. 지금까지는 잘 작동했지만 탭의 버튼을 사용하여 탭의 내용을 새로 고칠 수 있어야합니다. 새로 고침 이벤트/작업을 하위 구성 요소로 보내는 우아한 방법이 있습니까?

새로 고침해야하는 탭의 이름이 들어있는 부모 구성 요소 refresh 속성을 사용하기 쉽지 않은 구성 요소로 새로 고침 단추를 이동하거나 성분은 관찰한다), 그러나 그들 중 누구도 우아하지 않다.

나는 또한 this suggestion을 보았지만 동적으로 생성 된 탭에서 부모 구성 요소 속성으로 탭 이름을 하드 코딩 할 수없는 방법을 알지 못했습니다.

Answer 1

관찰 가능한 패턴을 사용할 수 있습니다 (이 게시물의 내용과 비슷합니다).

{{my-thing parent=controller}} 

App.MyThingComponent = Em.Component.extend({ 
    setup: function(){ 
    this.get('parent').register(this); // you should check to see if parent exists, I'm lazy 
    }.on('init'), 
    sayHello: function(){ 
    console.log('hello'); 
    } 
}); 

그리고 부모 컨트롤러 (배열, 객체, 또는 일반 컨트롤러)에서

App.FooController = Em.Controller.extend({ 
    observers: null, 
    setup: function(){ 
    this.observers = []; 
    }.on('init'), 
    register: function(observer){ 
    this.observers.pushObject(observer); 
    }, 
    talkToChildren: function(){ 
    this.observers.forEach(function(child){ 
     child.sayHello(); 
    }); 
    } 
}); 

예 : 좋은 제안과 같은 응답을위한 http://emberjs.jsbin.com/yoyod/1/edit