Ember渲染组件使用屈服 [英] Ember rendering component using yield
问题描述
我有一个 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}}
所以我想在my-yield-component2中显示/渲染我的其他组件3(因为我是使用收益率)
So I want to display/render my-other-component3 inside my-yield-component2 (as I am using yield)
里面 my-yield-component2
,我有以下;
<div>My component with yield</div>
<div>{{yield}}</div>
我的问题是如何通过/访问实际定义在my- component1,但是因为我使用yield,它会被渲染在我的yield-component2
所以我想知道如何传递prop1?
My question is how do I pass/get access to "prop1" which is actually defined in my-component1, but because I am using yield, it would be rendered in my-yield-component2 So I want to know how to pass "prop1" ?
推荐答案
prop1
的价值 my-component1
的方式没有任何问题传递给 my-other-component3
。 my-component1
的模板文件中的上下文是 my-component1
本身;因此 prop1
将从 my-component1
传递到 my-other-component3
即使 my-other-component3
在 my-yield-component2
中呈现。请查看以下
There is nothing wrong with the way prop1
value of my-component1
is passed to my-other-component3
. The context within my-component1
's template file is my-component1
itself; hence prop1
will be passed from my-component1
to my-other-component3
even if my-other-component3
is rendered within my-yield-component2
. Please take a look at the following twiddle that illustrates what I explained so far works smoothly.
关于从 my-yield-component2
到 my-other-component3
是另一个故事;您需要收益
sth。从 my-yield-component2
的模板中,将其传递给 my-other-component3
,如下所示:
Regarding value passing from my-yield-component2
to my-other-component3
is another story; where you need to yield
sth. from the template of my-yield-component2
and pass it to my-other-component3
as follows:
{{#my-yield-component2 as |valueToYield|}}
{{my-other-component3 field=(my-helper prop1) otherField=valueToYield}}
{{/my-yield-component2}}
我已经提供了一个工作 twiddle 我之前在一个你以前的问题。
I have already provided a working twiddle of what I explained above in one of your previous questions.
这篇关于Ember渲染组件使用屈服的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!