독립적 인 구성 요소는 어떻게 통신합니까?

Question

독립 구성 요소가 구성 요소의 변경 또는 이벤트를 알리도록하려면 어떻게해야합니까?

예 :

<#user-social profile> 
    {{partial 'user-handle'}} 

    <div class='subtext'> 
    {{#reply-component}} {{/reply-component}} 
    </div> 

    <div class='replybox hide'> 
    <textarea></textarea> 
    <input type='button' value='Reply to user' /> 
    </div> 
</user-social profile> 

문제 : 답장 구성 요소 내부의 링크를 클릭 할 때 가시성을 전환 replybox를 원한다.

Answer 1

구성 요소는 설계 상 격리되어 있습니다. 의존성을 지정하는 것은 귀하의 책임입니다. 바운드 속성을 자식에게 전달하거나 자식이 부모에서 트리거 할 동작을 지정하여 부모와 자식 구성 요소간에 통신 채널을 도입 할 수 있습니다.

의사 소통의 형태로 양방향 바인딩을 사용하는 것이 점차 안티 패턴으로 간주되므로 조치가 더 적합 할 것입니다. 예 :

{{#reply-component toggleReplybox="toggleReplybox"}} 

그런 다음, 자녀의 구성 요소 :

actions: { 
    whateverTriggersTheToggle: function() { 
    this.sendAction('toggleReplybox'); 
    } 
} 

당신은 하위 구성 요소 안에 뭔가에 whateverTriggersTheToggle 작업을 추가해야 할 것이다. 부모 구성 요소에서

: displayReplybox : 거짓, 이것은 당신의 replybox 요소 주위에 {{#if displayReplybox}} 래퍼를 추가하는 필요로 할

actions: { 
    toggleReplybox: function() { 
    this.set('displayReplybox', !this.get('displayReplybox')); 
    } 
} 

.