Emberコンポーネントは、テンプレートを渡さずに親コンポーネントのプロパティを継承できますか？

Question

親と子の部品が付属するコンポーネントがいくつかあります。たとえば、Emberコンポーネントをタブメニューのソリューションとして考えてみましょう。

{{#tab-set}} 
    {{tab-single title=PageA selected=true}} 
    {{tab-single title=PageB}} 
    {{tab-single title=PageC}} 
{{/tab-set}} 

これらのタブでは、選択する必要がある方法を知る必要があります。 タブセットは、選択解除と呼ばれるプロパティを持つことができます。これはすべての子供に渡すことができるtab-singles。 tab-singleをクリックすると、選択解除プロパティが表示されます。他のすべての子であるtab-singleがすべて非表示になります。これにより、クリックされたタブ - シングルが選択されたタブになります。それはこのようになります

...私が今までに作るすべてのタブについては

{{#tab-set}} 
    {{tab-single title=PageA selected=true deselector=deselector}} 
    {{tab-single title=PageB deselector=deselector}} 
    {{tab-single title=PageC deselector=deselector}} 
{{/tab-set}} 

、私はdeselectorに合格する必要があります。tab-singleには、のdeselectorプロパティを常に親ののタブセットに設定する方法がありますか？

つまり、子コンポーネントは、テンプレートで渡されることなく、親コンポーネントから常にプロパティを検索できますか？

ta

Answer 1

コンテキストコンポーネントで行う方法があります。あなたがする必要があるのは、tab-singleを直接使用するのではなく、既に選択解除されている要素を持つtab-singleコンポーネントを生成することです。

I've made a working Twiddleですので、確認することができます。

まず、deselectorアクションバインドのコンポーネントを生成します。私はオブジェクトをインラインで構築するためにハッシュヘルパーを使用しています。これにより、エクスポートされた変数がより構造化されます。

// app/templates/components/tab-set.hbs 
{{yield (hash tab=(component 'tab-single' deselector=deselector))}} 

ようなdeselectorアクションをバインドすることができるように、我々はtab-setにそれを渡すために持っていることを意味します。ブロックフォームとyieldを使用しているので、ブロックパラメータと呼ばれるものがあります。 {{each array as |item|}}の構文を考えてください。

{{#tab-set deselector=(action 'deselector') as |opts|}} 
    {{opts.tab page="1"}} 
    {{opts.tab page="2"}} 
    {{opts.tab page="3"}} 
{{/tab-set}} 

が、これは十分にご質問にお答え:)

ホープ：項目は、どんな名前あなたは、よりフィット感を確認することができ