降雨を使用したエンバーレンダリングコンポーネント

Question

私はmy-component1.jsを以下のように定義します。

export default Ember.Component.extend({ 
prop1: 'abc' 
}) 

相当するテンプレートmy-component1.hbsは以下の通りである。

{{#my-yield-component2}} 
    {{my-other-component3 field=(my-helper prop1)}} 
{{/my-yield-component2}} 

だから私は（私は降伏を使用していたように）私の収量・コンポーネント2の内側に私の-他-component3をレンダリング/表示する

my-yield-component2内部に、私は次のことを持っています。

<div>My component with yield</div> 
<div>{{yield}}</div> 

私の質問は、私は実際に私の-コンポーネント1で定義されている「PROP1」へのアクセスを取得/どのように渡すんですが、私は降伏を使用していますので、それはだから私の収量・コンポーネント2 でレンダリングされますI "prop1"を渡す方法を知りたいですか？

Answer 1

の値がmy-component1の場合は、my-other-component3に渡されます。 my-component1のテンプレートファイル内のコンテキストはmy-component1です。したがって、my-other-component3がmy-yield-component2にレンダリングされても、prop1はmy-component1からmy-other-component3に渡されます。私がこれまでに説明したことがスムーズに動作することを示す以下のtwiddleを見てください。

my-yield-component2からmy-other-component3に渡る値に関しては別の話です。どこにあなたがyield sthする必要があります。 my-yield-component2のテンプレートから、次のようmy-other-component3に渡し：

{{#my-yield-component2 as |valueToYield|}} 
    {{my-other-component3 field=(my-helper prop1) otherField=valueToYield}} 
{{/my-yield-component2}} 

私はすでに、私はあなたの前の質問のoneに前述したものの作業twiddleを提供しています。