使用收益率填充渲染組件

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}} 

所以我想顯示/渲染我屈服COMPONENT2在我的 - 其他 - component3（因爲我使用的收益率）

裏面my-yield-component2，我有以下的;

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

我的問題是如何傳遞/可以訪問它在我的-COMPONENT1實際上定義「爲prop1」，而是因爲我用的產量，這將是我的屈服COMPONENT2 所以呈現我想知道如何傳遞「prop1」？

Answer 1

將prop1的值傳遞給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 ......從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。