엠버에있는 구성 요소 내의 구성 요소 x 개를 만들었습니다. 2.8

Question

엠버 응용 프로그램, 게임 인스턴스 및 게임 카드에 두 개의 구성 요소가 있습니다. 아이디어는 '카드'숫자 속성을 게임 인스턴스에 전달하고 게임 카드의 x 인스턴스를 생성한다는 것입니다.

<div> 
    {{input type="number" min="2" max="24" placeholder="enter a number from 4 to 24" 
         value=inputValue 
         key-up=handleInputChange}} 

    {{game-instance cards=inputValue}} 
</div> 

게임 instance.hbs

<div> 
    <!-- iteratively create game cards based on cards attribute passed --> 
</div> 

게임 card.hbs

<div class="gamecard"> 
    <img src="" /> 
</div> 

하려고 다음은 설치가

game.hbs (주 파일)입니다 game-instance.hbs 논리를 작성하는 방법을 이해하고, 핸들 바를 사용하여 배열을 반복하는 방법을 살펴 보았습니다. 이것은 내가 원하는 것만은 아니다. 내가 원하는 건이 동작이다.

1. game-instance는 game.hbs에서 전달 된 카드 속성을 읽는다. 이 경우 가정합시다 6

2. for-loop 논리 유형은 게임 인스턴스 내에 6 개의 게임 카드 인스턴스를 생성합니다.

이렇게하려면 적절한 핸들 바가 있습니까? 그렇지 않은 경우 어떻게 비슷한 동작을 얻을 수 있습니까? 매우 감사합니다.

Answer 1

아이디어 카드 배열이있는 #each 블록과 함께 component 도우미를 사용해야합니다. 그래서 우리는 카드 배열을 변경할 때마다 전체 블록을 다시 렌더링합니다.

사용자가 입력을 입력하면 cardsArray를 생성/업데이트 할 수 있습니다. 즉, 게임 인스턴스 성분 자동으로 다시 쓰게 게임 카드 성분

게임 instance.hbs

{{#each cardsArray as |value,index|}} 
{{component 'game-card' value }} 
{{/each}} 

우리 cardsArray가 pushObject를 사용하여 또는 다음 다음 each 블록 렌더링되는 전체 참조 chagning 변경할 때마다 것이다.