Ember2.8：私はこのように設定されているゲーム・カード・コンポーネントを持つ親コンポーネント

Question

からコンポーネントのブール変数の値を切り替える：

ゲーム-card.js

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    classNames: ['flip-container'], 
    isFlipped: false, 
    actions: { 
    doCardClick(param){ 
     this.get('onCardClick')(param); 
    }, 
    toggleIsFlipped() { 
     this.toggleProperty('isFlipped'); 
    } 
    } 
}); 

ゲーム-card.hbsこのコンポーネントは、ゲーム・ハンドラと呼ばれる別のコンポーネントと相互作用

<span {{action 'doCardClick' symbol}}> 
    <div id="card" {{action 'toggleIsFlipped'}} class = "{{if isFlipped "flipped"}}"> 
    <figure class="front"></figure> 
    <figure class="back"> 
     <img src={{symbol}} /> 
    </figure> 
    </div> 
</span> 

：

ゲーム-handler.js

import Ember from 'ember'; 

export default Ember.Component.extend({ 

    clickedCard: null, 
    clickedCards: null, 

    init() { 
    this._super(...arguments); 
    this.set('clickedCard', ''); 
    this.set('clickedCards', []); 
    }, 
    handleTurn(clickedCards) { 
    if(clickedCards[0] === clickedCards[1]){ 
     console.log('we have a matching pair!'); 
     this.set('clickedCards', []); 
    } else { 
     console.log('no match!'); 
     this.set('clickedCards', []); 
    } 
    }, 
    actions: { 
    handleCardClick(someUrl) { 
     if(this.clickedCards.length === 1){ 
     //we know the array will have 2 cards to evaluate now. 
     this.set('clickedCard', someUrl); 
     this.clickedCards.push(this.clickedCard); 
     this.set('clickedCard', ''); 
     //we call handleTurn because we have 2 cards 
     this.handleTurn(this.clickedCards); 
     } else { 
     // we just add the first clicked card to the array 
     this.set('clickedCard', someUrl); 
     this.clickedCards.push(this.clickedCard); 
     this.set('clickedCard', ''); 
     } 
    } 
    } 
}); 

そしてそうのように実装されている：

ゲーム-handler.hbs

{{#each model.cards as |instance|}} 
    {{game-card symbol=instance.url onCardClick=(action 'handleCardClick')}} 
{{/each}} 

ゲーム・ハンドラは2連続クリック枚のカードならば見ての処理ロジックを担当しています同じ画像URLを持っている私が今したいことは、個々のゲームカードのisFlipped変数に、このコンポーネントによって実行されるロジックに応じて変わるように何とか伝えます。

例えば

、優勝ペアの場合：

1. 我々持って優勝ペア（すなわち、同じ画像URLを持つ2つのゲームカード）
2. ゲーム・ハンドラは何とか2枚のカードを分離し、それぞれのプロパティを渡して、 'isFlipped'変数のトグルをトリガします。 Play.jsルートで

Answer 1

、

私はsetupControllerフック内のオブジェクト、そうfalseで、デフォルト値で、すべてのカードインスタンスへisFlippedプロパティが含まれますが、カードを準備している、と仮定します。

カードオブジェクトとそのプロパティの所有者はプレーコントローラですので、play.jsコントローラのプロパティを変更して、この変更がデータバインディングを介してすべてのコンシューマに自動的に伝播されるようにしてください。 play.hbsで

、Play.jsコントローラで

{{#each model.cards as |instance|}} 
    {{game-card card=instance symbol=instance.url onCardClick=(action 'handleCardClick') toggleIsFlipped=(action 'toggleIsFlipped')}} 
{{/each}} 

、game-card.hbsで

actions: { 
    handleCardClick(cardInstance) { 
     //use this clicked cardInstance and do your logic 
    }, 
    toggleIsFlipped(cardInstance) { 
     this.toggleProperty(cardInstance.get('isFlipped')); 
     //we are chaning particular clicked instance card isFlipped property and this change will reflect it in game-card component. 
    } 
} 

、

<span {{action 'doCardClick' card}}> 
    <div id="card" {{action 'toggleIsFlipped' card}} class = "{{if card.isFlipped "flipped"}}"> 
    <figure class="front"></figure> 
    <figure class="back"> 
     <img src={{symbol}} /> 
    </figure> 
    </div> 
</span> 

あなたは状態を保持するための親コンポーネントを作成する必要はありません。対応するコントローラで状態を維持することができます。
this.get('clickedCards').pushObject(this.clickedCard)間違っ - - サイドノート、
this.clickedCards.push(this.clickedCard)に右
プロパティとpushObjectの代わりpushを取得するためにget方法をご検討ください。 pushObjectを使用すると、オブザーバーが起動し、対応するテンプレートが新しい値で更新されます。